z-index的层叠顺序问题

原创 小枝节KKW 随笔 CSS 294阅读 2017-05-18 15:27:17 举报

z-index属性在css定位中的使用应该屡见不鲜了,那么是否真正了解了它呢,现在去探索一下~
看下边的例子:
html 代码

上边的例子中,表面上parent的z-index高于son,parent应该高于son,但事实却不是这样,可见z-index不是越大,堆叠顺序就越高。
在上边的例子中无论怎样设置,即使son的z-index设置为负的,son依然位于parent上边,可见z-index的高低和元素父子层级还有一定的关系。
因为一旦设置了z-index,就形成了一个堆叠上下文,所有的元素就在堆叠上下文中进行排列
那么上述例子中son能不能在parent下边呢,看下边这种情况
html 代码

parent不设置z-index,son这只负的z-index,这时parent位于son上边了

综合以上,对于z-index可以得出以下的结论:
1.未设置position的(position为static)的情况下,z-index不起作用(z-index在relative/absolute/fixed的情况下才有效)
2.设置position不为static的情况下
2-1.同一级的元素
2-1-1. 设置了z-index:z-index越大,层级越高,越靠前
2-1-2. 未设置z-index:DOM树中越靠后的元素层级越高,越靠前
2-2.不同级的元素
2-2-1.父元素设置了z-index:子元素始终在父元素上边,即使子元素的z-index小于父元素的z-index
2-2-2.父元素没有设置z-index:子元素设置负的z-index可位于父元素的下边,其余全位于父元素的上边

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复