Question

在我看来，上面的例子应该看起来像一个灰色方框，#x没有越过边缘而#y伸出底部。

但它不是那样 - 显然设置overflow-x: hidden;导致overflow-y: scroll | auto;。

有什么方法可以解决这个问题吗？我需要允许某些元素转义边框而不在overflow: visible上设置#box。

Answer 1

#y如果不被取出文档流，就无法突破其边界框。将position: absolute;添加到#y是否会产生效果？

<强>更新

重新构建的HTML示例，包括一个容纳框，可以轻松地将所有内容放在一起。在这里试试：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 */
}

Answer 2

这就是我所拥有的，并且有效：

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

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

}

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


#y {
    width: 10px;
    height: 150px;
    background: #c4b2ff;
    position: fixed;
}

Answer 3

我认为问题是你的身高：外部div的100px。如果你删除这个高度属性，你会得到你正在寻找的结果吗？

否则，我认为batwad可能会使用三个div敲打头部。

CSS溢出 - 未按预期工作

3 个答案: