CSS溢出 - 未按预期工作

问题描述

在我看来，上面的例子应该看起来像一个灰色框， #x 不会越过边缘和 #y 戳出底部。

In my mind the above example should look like a grey box with #x not going past the edge and #y poking out the bottom.

但它不是那样 - 显然设置 overflow-x：hidden; 导致溢出-y：scroll |自动; 。

But it's not like that - apparently setting overflow-x: hidden; causes overflow-y: scroll | auto;.

有什么办法吗？

我需要允许某些元素逃离边界框在 #box 上设置 overflow：visible 。

Is there any way around this?
I need to allow certain elements to escape the bounding box without setting overflow: visible on #box.

推荐答案

#y 无法突破其边框，而不会退出文档流。添加 position：absolute; 到 #y 给你之前的效果吗？

#y can't break out of its bounding box without being taken out of the flow of the document. Does adding position: absolute; to #y give the effect you're after?

更新

重新组织的HTML示例，包括一个容器框，尝试一下：

Restructured HTML example, including a containing box to allow everything to be easily positioned together. Try it out here: http://jsfiddle.net/GfNbp

<div id="container">
    <div id="box">
        <div id="x"></div>
    </div>
    <div id="y"></div>
</div>


#box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #ededed;
    padding: 10px;

    /* ADD THE OVERFLOW */
    overflow-x: hidden;
    overflow-y: visible;
}

#container{
    position: absolute;
    top: 30px;
    left: 20px;
}

#x {
    width: 150px;
    height: 10px;
    background: #c1ffb2;
}

#y {
    width: 10px;
    height: 150px;
    background: #c4b2ff;
    position: absolute;
    left: 20px; /* margin+padding */
    top: 30px; /* margin+padding+x-height */
}

这篇关于CSS溢出 - 未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！