Question

考虑以下DIV结构：

<style>
#content{float:left;width:100%;}
#overlay{position:absolute;z-index:100;}
</style>

<body>
    <div id="header">header</div>
    <div id="overlayBox">
        <div id="overlay">
            I want to overlay #content. 
            If my height is greater than
            #content, I don't want to 
            spill onto other elements. 
            I want to push them away.
        </div>
    </div>
    <div id="content">content</div>
    <div id="footer">footer</div>
</body>

在我想要的示例中：

如果#header的高度高于#footer

，请将#overlay和#content推开

即使这个DIV结构完全错误，它也仅用于说明需要。

这是我遇到的问题的一个很好的例子： http://jsfiddle.net/Udqkc/

Answer 1

好吧，将#content移到#overlayBox：

    <div id="overlayBox">
        <div id="overlay">
            I want to overlay #content. 
            If my height is greater than
            #content, I don't want to <br />
            spill onto other elements. <br />
            I want to push them away.
        </div>
        <div id="content">content</div>
    </div>

略微改变了CSS：

#overlay {float:left;}
#overlayBox {overflow:hidden;}
#content {position:absolute;}

工作示例 - http://jsfiddle.net/nKwQF/14/

希望这有帮助，因为我不确定你是否能够移动#content

浮点内的z-index没有溢出到兄弟节点

1 个答案: