我正在尝试让一个 div 显示为包含 div 的内联内容下方但位于其容器背景上方的部分背景。如果我将部分背景的 z-index 设置为 -1,它就会出现在背景后面。但是,如果我将包含的 div 的 z-index 设置为 1,而包含的 div 的 z-index 为 -1,它将按需要显示。
谁能向我解释为什么会这样,这是否是一种可靠的方法?
.container {
position: relative;
width: 80%;
height: 18px;
padding: 6px 10px;
background: #666;
z-index: 1;
}
.partialbg {
position: absolute;
left: 0px;
top: 0px;
height: 30px;
width: 80%;
background: #0CC;
z-index: -1;
}
<div class="container">Text here
<div class="partialbg"></div>
</div>
最佳答案
发生这种情况的原因是因为有一个 child 和一个 parent 。如果您在父级上设置 z-index
,子级将是相同的,因为 z-index
是堆叠的。
因此,通过在父级上设置 1
的 z-index
,子级现在也是 1
。
从系统上讲, child 不可能落后于 parent ,因为这没有任何意义。但是,文本是 child 的 sibling 。通过在 child 上设置 -1
的 z-index
, child 和 parent 之间基本上没有影响,但是由于 sibling 受到影响, child 现在去在 sibling 后面。
关于html - Z 索引低于文本但高于背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19523136/