Question

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;）导致浏览器抛出一些不需要的滚动条。

From the spec:

overflow-x和overflow-y的计算值与。{ 它们的指定值，但与visible的某些组合除外是不可能的：如果一个指定为visible而另一个指定为scroll auto或visible，然后auto设置为{{1}}。

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

Answer 2

当你有一个带有overflow: hidden的块和一个带有position: absolute的块时，直到有溢出的块和绝对定位块的所有父块都有position: static，绝对定位块赢了不被隐藏。

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

这是一个小提琴：http://jsfiddle.net/kizu/Udvgm/3/

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

2 个答案: