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

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

您可以向主要父级div添加position:relative;。

Answer 2

如果您使用百分比值，这应该有用，我的意思是您已经使用了

margin-left:xxxpx; 

以像素为单位，但如果您可以计算其百分比值，则可能会解决此问题。

对于计算，您可以获得http://resources.sameerast.com/responsive-web-design-formula-easy-calculator.html

的帮助