仅对已定位的元素( position:relative
,position:absolute
,position:fixed
)有效,默认值为0,可以为负值。
z-index 的层叠规则
z-index 值从小到大层叠
兄弟元素
- z-index 值相同时,后面的元素在前面的元素上面
- z-index 值不同时,z-index 值较小的在下方
父子元素
- 子元素永远在父元素上面
- 不同父元素里的子元素不能直接比较z-index,当父元素的z-index比较小时,子元素的 z-index无论多大都在下方 !
不同样式的层叠效果
从底部到顶部
- background-color(永远是最底层)
- background-image/border
- 负 z-index
- block 块状盒子
- float 浮动盒子
- inline/inline-block 内联元素/盒子
- z-index:auto 或看成 z-index:0 的元素
- 正 z-index