播放按钮在放大时向下滑动

Question

标准比例

放大

播放按钮在放大时向下滑动，但其他元素保持不变。我一直在试图找出如何解决它很长一段时间，我试图关闭它在一个粘的容器，使窗体的子元素，但它没有帮助解决问题

负责玩家的代码:

.white button{
position: absolute;
}

#play{
position: absolute;
width: 7vw;
height: 3vw;
margin-top: -78vh;
margin-left: 30vw;
font-family: 'Clash Display', sans-serif;
font-size: 1.2vw;
border-radius: 150px;
border-style: none;
pointer-events: none;
mix-blend-mode: color-dodge;
padding-left: 2.6vw;
}
.playpause {
position: absolute;
padding: 20px;
border-radius: 50%;
cursor: pointer;
transition: 0.3s ease-in-out;
pointer-events: auto;

}

.playpause .button {
position: absolute;
width: 1.1vw;
height: 1.1vw;
background: rgba(10, 10, 10, 0.9);
transition: inherit;
clip-path: polygon(0 0, 50% 25%, 50% 75%, 50% 75%, 50% 25%, 100% 50%, 100% 50%, 0 100%);
margin-top: -39.4vw;
margin-left: 29.9vw; 
mix-blend-mode: multiply;
pointer-events: auto;
}

.playpause.playing .button {
position: absolute;
clip-path: polygon(0 0, 40% 0, 40% 100%, 60% 100%, 60% 0, 100% 0, 100% 100%, 0 100%);
color: rgb(32, 32, 32);
mix-blend-mode: multiply;
pointer-events: auto;
}
<div class="playpause">
<div class="button"></div>
</div>
<div></div>
<form
class="white button"><input type="button" value="Play" id="play">
</form>
<script>
const playpause = document.querySelector('.playpause');
playpause.addEventListener('click', () => {
playpause.classList.toggle('playing');
});
</script>

Answer 1

使用top&left属性来定位，避免在css中使用边距进行定位。其次，在按钮的父按钮上使用position: relative;，以避免混乱。