如何在另一个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/
答
从.below
给予的元素的绝对或相对的,和z折射率的现在的位置删除position:absolute
,创建一个局部堆叠上下文 。这意味着对于任何绝对或相对定位的孩子,他们的z-索引是相对于他们的父母(本地堆栈上下文),而不是父母外的元素的z-索引。
如果.below
需要被绝对定位,然后把.below
和.above
在一个容器中,让容器position:absolute
,而不是.below
。
答
只是锻炼这个代码。
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;
}
有另一种方式?因为我想在滚动时将绝对位置更改为固定位置,而不会跳到前景。 – 1Blerk 2013-02-20 13:38:01
只要'.above'与'.middle'处于不同的本地堆栈上下文中,每个z-index值都不会影响其中哪个显示在顶部。上面的问题不包括固定位置。您可能需要更新问题以提供其他信息和代码。 – 2013-02-20 13:46:53