调整浏览器大小时绝对位置错误

Question

我有两个div s，相对位置的第一个div和绝对位置的其他div，当我将浏览器调整为100％的屏幕尺寸时，一切似乎都很好。< / p>

当我调整浏览器大小并且第二个元素处于绝对位置时，问题出现在容器外面，并不多，但仍然在外面的不同位置。

演示：http://jsfiddle.net/1pde2gyc/

我的CSS代码：

#container_front {
    position:relative;
    width:40%;
    margin-left:auto;
    margin-right:auto;
}

#front_like {
    position:absolute;
    width:50px;
    height:50px;
    left:75%;
    bottom:-1%;
}

问题在于front_like，此DIV内部有一个图像，此图像显示在右侧和中间或多或少，当我将屏幕调整为50或30％时，图像会从图像中移出容器名为container_front。

我认为使用绝对值和％总是保持在同一位置但我看到调整大小时移出，是否存在解决此问题的解决方案？ ir css计算位置并保持在同一侧的容器中而没有出去

感谢最诚挚的问候。

Answer 1

问题：如果你定位一个绝对left: 75%;元素的宽度为百分比并且你调整大小，那么子元素仍然定位在75％但现在是一个较小的区域。子元素不是基于百分比的宽度，因此它不适应新的宽度，而是孩子推出界限，因为它的最左边点将保持在较小父节点的75％，并且其宽度保持像素值。

解决方案：从像素更改为百分比值

子节点在调整大小时将适应父宽度，并且不会超出父元素的边界。

这是jsFiddle demo

---

CSS解决方案或者，使用CSS媒体查询将样式应用于较小视口的帐户。

@media screen and (max-width: 460px) {
    #front_like {
        left: 60%;
    }
}

jsFiddle Demo - 这不是理想的，因为您需要多次查询多次查询

Answer 2

还要检查您的 div 中是否添加了 css 属性 flex，并坚持了几个小时