html - 有没有办法“强制” child 的z指数？

这是我的code：

的HTML

<div class="item">
    &nbsp;
</div>

<div class="item">
    <div class="item-abs">
        &nbsp;
    </div>
</div>

<div class="item">
    &nbsp;
</div>​

的CSS

.item
{
    position:relative;
    z-index:5;
    float:left;
    background-color:red;
    width:100px;
    height:100px;
    margin:10px;
}

.item-abs
{
    position:absolute;
    top:0px;
    left:40px;
    z-index:500;
    background-color:blue;
    width:100px;
    height:100px;
}
​

如您所见，如果孩子的Z指数为500，则是下一个父母。有没有一种方法可以强制儿童z-index？骑父亲的栈吗？还是这种情况无法完成？

我无法更改父母的z-index，并且我想在不使用javascript设置适当的血统z-index的情况下进行操作...

最佳答案

当然可以，您甚至不需要设置子级的z-index。

只需将最后一个div的z-index设置为较低的z-index，就可以完成。

Example

出现这种现象的原因如下：如果父级具有相同的z-index，则在DOM中倒数第二个将获胜。因此，从技术上讲，对具有绝对孩子的父母使用简单的z-index:1就足够了。另一种可能性是仅在子级上设置z-index：

Example