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

Question

我有两个 div，当我将浏览器调整为 100 时，第一个 div 处于相对位置，其他 div 处于绝对位置% 屏幕尺寸，一切似乎都很好。

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

演示: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 的容器。

我认为使用 absolute 和 % 总是保持在相同的位置，但我看到当调整大小移出时，是否存在解决此问题的解决方案？ ir css 计算位置并留在同一侧的容器中并且没有 out

致以最诚挚的问候。

Answer 1

问题:如果您绝对定位某些元素的 left: 75%; 具有基于百分比的宽度的元素并调整大小，则子元素仍位于 75 % 但现在面积较小。子元素不是基于百分比的宽度，因此它不会适应新的宽度，而是子元素推出边界，因为它的最左边的点将保持在较小父元素的 75%，并且它的宽度仍然是像素值。

解决方案:将像素值更改为百分比值

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

这是一个jsFiddle demo

---

CSS 解决方案:或者，使用 CSS 媒体查询来应用样式以适应较小的视口(viewport)。

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

jsFiddle Demo - 这并不理想，因为您将不得不通过多个查询多次考虑它