CSS - 防止绝对定位元素溢出body

Question

我在页面中有一个元素，它使用TOP和LEFT CSS样式进行绝对定位。如果它位于左侧或顶部区域的负位置，那就没有问题。但是，当该元素被放置在左侧位置大于窗口innerwidth时，滚动条会出现。

是否有方法可以防止该元素发生这种情况？我不能将overflow:hidden;设置为我的body元素，因为那会破坏我的布局。例如，一个像 overflow-parent:none;这样的属性会很好（但不幸的是不存在）。

- laarsk

---

你提到无法在 body 上设置 overflow: hidden;。我猜想原因是这样会破坏垂直滚动？不过，你尝试过在 body 上使用 overflow-x: hidden; 吗？ - shaunsantacruz

有一些示例代码，我们可以看到它实际发生的情况，这样我们可以更好地帮助您。 - yunzen

Answer 1

你需要使用嵌套的div，每个div都有不同的职责：
最外层使用left和right同时设置位置。 right:0将其设置到右侧。

内部div是实际内容div，它设置宽度。

这里是演示：http://jsfiddle.net/atnc3/44/

<div class="abs-position">
    <div class="abs-content">
         Absolut Vodka       
    </div>
</div>

---

.abs-position {
    position:absolute;
    right:0;
    left: 300px;
    overflow: hidden;
}
.abs-content {
    width: 400px;
}

.abs-position {
    position:absolute;
    right:0;
    left: 300px;
    overflow: hidden;
    /* following: just for demonstration purposes */
    padding: 5px;
    border: 1px solid gold;
    opacity: 0.8;
}
.abs-content {
    width: 400px;
    /* following: just for demonstration purposes */
    padding: 5px;
    background: lightgray;
}
.container {
    width: 600px;
    background: cornflowerblue;
}

<div class="abs-position">
    <div class="abs-content">
         Absolut Vodka       
    </div>
</div>
<div class="container">
Other content<br>
Other content<br>
Other content<br>
Other content<br>
</div>

- yunzen

---

将right:0;和bottom:0;设置正确，并将内容放置在无宽度、无高度的容器中，问题解决了，谢谢！ - laarsk

Answer 2

我原以为绝对定位的元素不占据空间。你的元素里有 'clear' 吗？

可以尝试浮动元素进行快速检查？(float:left);

- msponagle

---

浮动对绝对定位的元素会产生什么影响？将绝对定位的元素浮动是否有意义？ - laarsk

@laarsk 这根本没有意义。对于绝对定位的元素，float 是被忽略的。 - yunzen