可溢出：隐藏；用于隐藏未定位的内容但仍显示定位的内容？
首先，看看这个： 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;）会导致浏览器抛出一些不需要的滚动条。
First of all, take a look at this: 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;
}
I am wondering if it is possible for the blue box (#absoluteChild) to overflow outside the grey box (#container), but the overflowing parts of the red box (#tooWide) to be hidden.
Before you suggest it, using overflow: hidden; overflow-y: visible; (or overflow-x: hidden; overflow: visible;) causes the browser to throw in some unwanted scrollbars.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不幸的是，在你的情况下这是不可能的。
来自规范：
一个有用的页面，包含示例和更好的解释：http://www.brunildo.org/test/Overflowxy2 .html
Unfortunately, it's not possible in your circumstances.
From the spec:
A helpful page with examples and a better explanation: http://www.brunildo.org/test/Overflowxy2.html
当您有一个带有
overflow:hidden的块和一个带有position:absolute的块时，直到带有溢出的块和绝对定位块的所有父级都具有position :static，绝对定位块不会被隐藏。我不知道您想要如何处理代码，但是如果您想使用
overflow定位块中的某个块，则可以使用overflow< 将定位上下文移动到块之外/code>，因此绝对定位的块将是可见的并且可以定位在周围。这是一个小提琴： http://jsfiddle.net/kizu/Udvgm/3/
When you have a block with
overflow: hiddenand a block withposition: absoluteinside of it, until block with overflow and all parents of absolute positioned block haveposition: static, the absolute positioned block won't be hidden.I don't know that you want to do with your code, but if you want to position some block from the block with
overflow, you can move positioning context outside of the block withoverflow, so absolute positioned block would be visible and could be positioned around.Here is a fiddle: http://jsfiddle.net/kizu/Udvgm/3/