0

这是我的代码：

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;    
}
​

如您所见，如果孩子有 500 的 z-index，则在下一个父母之下。有没有办法强制孩子z-index？骑在父亲的堆栈上？还是这个场景做不到？

我无法更改父母的 z-index，并且我想在不使用 javascript 设置适当的下降 z-index 的情况下这样做...

4

2 回答 2

3

当然有，你甚至不需要设置孩子的 z-index。

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

例子

这种行为的原因如下：如果父级具有相同的 z-index，则 DOM 中最后一个“获胜”。所以从技术上讲，一个简单z-index:1的父母和绝对的孩子就足够了。其他可能性是仅在孩子上设置 z-index：

例子

于 2012-10-15T14:57:58.113 回答
0

以下小提琴似乎可以满足您的要求（我相信）：

http://jsfiddle.net/BhQNr/3/

这是通过删除父元素上的定位并使子元素相对（它适用于绝对值，但左侧和顶部值比使用绝对值时更接近）来完成。

于 2012-10-15T14:53:00.220 回答