gpt4 book ai didi

html - float 内的 z-index 不会溢出到兄弟节点

转载 作者:行者123 更新时间:2023-11-28 18:35:42 25 4
gpt4 key购买 nike

考虑以下 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>

在这个例子中我想:

如果 #overlay 的高度大于 #content,则将 #header#footer 推开

即使这个 DIV 结构完全错误,它也只是用来说明需要。


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

最佳答案

好吧,将 #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

关于html - float 内的 z-index 不会溢出到兄弟节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12794516/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com