有没有办法“强迫”儿童的z指数？

Question

这是我的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;    
}
​

正如你所看到的，如果孩子有500个z-index，那就是下一个父母。有没有办法强迫孩子z-index？骑在父亲的堆栈？或者这种情况无法完成？

我无法更改父母的z-index，我希望不使用javascript设置正确的下降z-index ...

Answer 1

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

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

Example

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

Example

Answer 2

以下小提琴似乎做你想要的（我相信）：

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

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