如何在另一个div前面获取div的子元素？

我试图让一个div的子元素在另一个DIV的前面，但Z-指数似乎只在DIV工作：如何在另一个div前面获取div的子元素？

HTML：

<div class="below"> 
    <div class="above">Oben!</div> 
</div> 

<div class="middle"></div>

CSS：

.below{ 
    position:absolute; 
    z-index:0; 
} 

.middle{ 
    position:absolute; 
    z-index:1; 
} 

.above{ 
    position:absolute; 
    z-index:2; 
}

我想让这些类以下面，中间，上面的顺序出现。这里是一个的jsfiddle来说明我的问题：http://jsfiddle.net/1Blerk/jH4vX/

来源

2013-02-20 1Blerk

从.below

Updated demo

给予的元素的绝对或相对的，和z折射率的现在的位置删除position:absolute，创建一个局部堆叠上下文 。这意味着对于任何绝对或相对定位的孩子，他们的z-索引是相对于他们的父母（本地堆栈上下文），而不是父母外的元素的z-索引。

如果.below需要被绝对定位，然后把.below和.above在一个容器中，让容器position:absolute，而不是.below。

来源

2013-02-20 13:26:00

有另一种方式？因为我想在滚动时将绝对位置更改为固定位置，而不会跳到前景。 – 1Blerk 2013-02-20 13:38:01

只要'.above'与'.middle'处于不同的本地堆栈上下文中，每个z-index值都不会影响其中哪个显示在顶部。上面的问题不包括固定位置。您可能需要更新问题以提供其他信息和代码。 – 2013-02-20 13:46:53

只是锻炼这个代码。

HTML

<div class="below"> 
<div class="above">Oben!</div> 
</div> 
<div class="middle"></div>

CSS

.below{ 
position:absolute; 
top:20px; 
z-index:0; 
} 
.middle{ 
position:absolute; 
z-index:0; 
} 
.above{ 
position:absolute; 
z-index:-1; 
}

来源

2013-02-20 13:38:49

如何在另一个div前面获取div的子元素？

回答

相关问题