Positioning DOM elements

Phaser 3
1

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

2

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

3 
.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
	});
}