如果父级溢出,如何使子元素可见:隐藏？

Question

我有一个子元素overflow:visible;和父元素overflow:hidden;.子元素的高度高于父元素.

如果属性溢出设置为可见,为什么隐藏子元素？

HTML:

<div id="container">
    <div id="makeThisVisible"></div>
    <div id="thisRemainsHidden"></div>
</div> 

CSS:

#container {
    width: 500px;
    height: 100px;
    border: 1px solid black;
    background: Gray;
    /*OVERFLOW*/
    overflow: hidden;
}
#makeThisVisible {
    width: 240px;
    height: 300px;
    float: left;
    border: 1px solid red;
    background: IndianRed;
    /*OVERFLOW*/
    overflow: visible;
    margin-left: 8px;
}
#thisRemainsHidden {
    width: 240px;
    height: 300px;
    float: left;
    border: 1px solid teal;
    background: DarkCyan;
}

小提琴:http://jsfiddle.net/ewNbu/

要解决此问题,我不想使用visibility属性#container或position:absolute属性#makeThisVisible,但我想找到另一种更好的方法来解决问题.

请帮忙!非常感谢.

Answer 1

你可以尝试玩:

position:absolute;

这会将孩子打破父元素的范围.

DEMO