# Positioning DOM elements

**URL:** <https://phaser.discourse.group/t/positioning-dom-elements/2612>\
**Category:** Phaser 3\
**Created:** [May 30, 2019, 10:27am UTC](https://phaser.discourse.group/t/positioning-dom-elements/2612 "2019-05-30T10:27:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Malyuga](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/malyuga/32/1084_2.png) [@Malyuga](https://phaser.discourse.group/u/Malyuga)\
**Post date:** [May 30, 2019, 10:27am UTC](https://phaser.discourse.group/t/positioning-dom-elements/2612/1 "2019-05-30T10:27:55Z")

</div>

The coordinates of my DOM element are placed relative to the html page, and not relative to the canvas element. But if you change the scale of the page, the element will be placed relative to the canvas. How to fix it? thanks

---

<div class="post-metadata">

**Author:** ![bradydowling](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bradydowling/32/1146_2.png) [@bradydowling](https://phaser.discourse.group/u/bradydowling)\
**Post date:** [May 30, 2019, 11:34pm UTC](https://phaser.discourse.group/t/positioning-dom-elements/2612/2 "2019-05-30T23:34:45Z")

</div>

Can you include a sample of the JS and CSS so we can see what you’re working with?

---

<div class="post-metadata">

**Author:** ![Malyuga](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/malyuga/32/1084_2.png) [@Malyuga](https://phaser.discourse.group/u/Malyuga)\
**Post date:** [June 2, 2019, 1:42pm UTC](https://phaser.discourse.group/t/positioning-dom-elements/2612/3 "2019-06-02T13:42:09Z")

</div>

```
.play-button {
    padding: 10px;
    margin: 0 auto;
    font-size: 48pt;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 10px;
}

.play-button:hover {
    background: #ffffff;
    color: #000000;
    border-color: #000000;
    transition: 0.6s;
    cursor: pointer;
}

this.playButton = this.add.dom(this.cameras.main.width / 2, this.cameras.main.height / 2 + 60, 'div', null, 'PLAY');
this.playButton.setClassName('play-button');
this.playButton.addListener('click');
this.playButton.on('click', this.animateButton, this);

animateButton(event) {
	this.tweens.add({
		targets: this.playButton,
		scaleX: 0.1,
		scaleY: 0.1,
		angle: -45,
		alpha: 0,
		ease: 'Linear',
		duration: 850,
		repeat: 0,
		onComplete: function(tween, targets) {
			this.tutorial();
		},
		onCompleteScope: this
	});
}
```