gpt4 book ai didi

html - Z-Index 不适用于子 Div

转载 作者:太空宇宙 更新时间:2023-11-04 14:38:00 27 4
gpt4 key购买 nike

这是 fiddle :http://jsfiddle.net/gBQqQ/

这是 html:

<div id='testtexture'>
<div id='testinside'>
<div style='vertical-align: top;' class='test'></div>
</div>
</div>

还有CSS:

.test {
width: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
min-height: 130px;
height:auto;
padding-bottom:50px;
background:blue;
}
#testtexture {
width: 100%;
position: relative;
top: 10px;
}
#testinside {
z-index: 3;
background:red;
position:relative;
}

我不明白为什么会出现问题。我希望要么是我遗漏了一些明显的东西,要么是存在一个潜在的问题,这意味着我不能让红色 div 高于蓝色 div - 也许是因为它是蓝色 div 的子元素?

最佳答案

一般来说,让子 div 出现在它的父元素后面并不是最好的主意。通常,您会将子 div 带到父 div 之外来执行此操作。尽管如此,这是可能的。将 z-index:-1 添加到子 div 并从父 div 中删除 position:relative

HTML

<div id='testtexture'>
<div id='testinside'>
<div class="test"></div>
</div>
</div>

CSS

.test {
position: relative;
z-index: -1;
width: 50px;
margin: 0 auto;
height: auto;
min-height: 130px;
padding-bottom: 50px;
background: blue; }

#testinside { background: red; }

参见 fiddle :http://jsfiddle.net/gBQqQ/1/

如果你使用 Firebug ,你可以看到 div.test 仍然在它父级后面的正确位置。作为旁注,您在 div 上的样式 vertical-align 不会做任何事情。

关于html - Z-Index 不适用于子 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18589732/

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