CSS 元素的位置在移动设备上的绝对变化（相同大小的屏幕）答案

【问题标题】：CSS element's position with Absolute Changes on mobile (same-size screen)CSS 元素的位置在移动设备上的绝对变化（相同大小的屏幕）
【发布时间】：2018-01-15 18:54:51
【问题描述】：

我总是发现自己对 CSS 中的这个绝对位置感到困惑，问题是当我尝试使用 chrome 和 firefox 时它很好，即使我正在更改浏览器的屏幕尺寸以查看响应行为但屏幕尺寸相同在移动设备上，我的绝对元素向上移动了一些像素。

#square-box-tratamiento-nebulizado {
    height:20px;
    width:100%;
    text-align:-webkit-right;
    z-index:1000;
    /*margin-top:-63px;*/
    position:absolute;
   bottom: 61px;
    pointer-events: none;
}
/*etiqueta pulverizado*/
#square-box-tratamiento-pulverizado {
    height:20px;
    width:100%;
    text-align:-webkit-right;
    z-index:1000;
    /*margin-top:-29px;*/
    position:absolute;
        bottom: 26px;
    pointer-events: none;
}

https://jsfiddle.net/x7b8hp9b/

提前致谢

【问题讨论】：

您是否尝试使用 top 而不是 bottom ？不是水平滚动条的原因吗？
@skam 正是因为滚动条我修复了它并写了答案。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

好的，正如我们发现的那样，如果您在图片中看到有一个滚动条出现在桌面版本的底部，在移动设备中没有，这会导致问题。我这样修复它：对于两个标签，我们将整个 div 移动到容器的顶部，并像这样更改 css 并在顶部放置一个边距：

#square-box-tratamiento-nebulizado {
    height: 20px;
    width: 100%;
    text-align: -webkit-right;
    z-index: 1000;
    margin-top: 427px;
    position: absolute;
    pointer-events: none;

如果屏幕尺寸发生变化，我们会为 margin-top 设置一个媒体查询来改变它

【讨论】：