可溢出:隐藏;用于隐藏未定位的内容，但仍然显示定位的内容

Question

首先，看看这个:http://jsfiddle.net/Udvgm/

HTML:

<div id="container">
    <div id="tooWide">
        <p>This is just way too wide! We should clip it.</p>
    </div>
    <div id="relativeParent">
        <div id="absoluteChild">
            <p>text</p>
        </div>
    </div>
</div>
<div id="container2">
    <p>This is some text which should be overlapped.</p>
</div>

CSS:

#container {
    background: grey;
    width: 450px;
}
#relativeParent{
    height: 40px;
    width: 400px;
    position: relative;
    background: green;
}
#absoluteChild{
    position: absolute;
    width: 100px;
    height: 60px;
    top: 0px;
    left: 10px;
    z-index: 2;
    background: blue;
}
#tooWide {
    background: red;
    width: 600px;
}

我想知道是否有可能让蓝色盒子(#absoluteChild)溢出在灰色盒子(#container)之外，但红色盒子(#tooWide)的溢出部分被隐藏。

在您建议之前，使用overflow: hidden; overflow-y: visible;(或overflow-x: hidden; overflow: visible;)会导致浏览器抛出一些不需要的滚动条。

Answer 1

不幸的是，这在您的情况下是不可能的。

在您建议之前，请使用overflow: hidden; overflow-y: visible;(或overflow-x: hidden; overflow: visible;)导致浏览器添加一些不需要的滚动条。

从规格:

overflow-x和overflow-y的计算值与除了与visible的某些组合外，它们的指定值是不可能的:如果一个指定为visible，另一个指定为scroll或auto，则visible设置为auto。

一个有示例和更好解释的有用页面:http://www.brunildo.org/test/Overflowxy2.html

Answer 2

当你有一个包含overflow: hidden的块和一个包含position: absolute的块时，除非块溢出并且绝对定位块的所有父块都有position: static，否则绝对定位块将不会被隐藏。

我不知道你想做你的代码，但如果你想从块overflow中定位一些块，你可以用overflow将定位上下文移到块之外，所以绝对定位块将是可见的，可以定位周围。

这里有一个小提琴:http://jsfiddle.net/kizu/Udvgm/3/