html - 在移动响应式设计中使用绝对位置

Question

考虑这张图片。这里我有一个背景图片(只有播放器的外部，而不是按钮计时和进度条)。现在我想将播放、下一个、上一个和停止按钮放在完全相同的位置。

#playbuttonimg{
    margin-left:-95px;
    position: absolute;
    top:20px;
}
#pausebuttonimg{
    margin-left:-95px;
    position: absolute;
    top:20px;
    display: none;
}
#prevbuttonimg{
    position: absolute;
    /*margin-left:-15px;*/
    top:24px;
}
#stopbuttonimg{
    position: absolute;
    margin-left:18px;
    top:24px;
}
#nextbuttonimg{
    position: absolute;
    margin-left:50px;
    top:24px;
}

如果我使用这种样式，在桌面浏览器中它会很完美，但在移动设备中，左边距为负值会使按钮超出屏幕，并且正边距将可见但不会相应放置。

因为它是移动网站，所以它应该适合所有移动设备。我怎么能在CSS中做到这一点？有没有办法不使用媒体查询来做到这一点？还是有任何其他方法可以使它适合所有移动设备？

Answer 1

您可以添加一个 position:relative; 到您的主父 div。