CSS----z-index 属性详解

用途:

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。

注意:

z-index 属性值可以是负的, 如果为正数,则离用户更近,为负数则表示离用户更远。

z-index 仅能在定位元素上奏效(position:relative/absolute/fixed;)

这个属性不会作用于窗口控件,如select对象。

可能的属性值:

描述
auto默认。堆叠顺序与父元素相等。
number设置元素的堆叠顺序。
inherit规定应该从父元素继承 z-index 属性的值,任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

不使用 z-index时堆叠顺序

不使用z-index的情况,也是默认的情况,即所有元素都不用z-index时,堆叠顺序如下(序号越大优先级越高):

  1. 根元素(即HTML元素)的background和borders
  2. 正常流中非定位后代元素
  3. 已定位后代元素

即所有定位元素的优先级高于非定位元素

但非定位元素和非定位元素之间和 定位元素和定位元素之间的顺序取决于HTML文档出现顺序, 靠后的优先

浮动z-index堆叠顺序

浮动元素z-index位置介于非定位元素定位元素之间, 堆叠顺序如下(序号越大优先级越高):

  1. 根元素(即HTML元素)的背景和border
  2. 正常流中非定位后代元素
  3. 浮动元素
  4. 正常流中inline后代元素
  5. 已定位后代元素

​​​​​​​​​​​​​​

浮动元素之间是不会出现z-index重叠的

非定位元素和非定位元素之间和 定位元素和定位元素之间的顺序同上取决于HTML文档出现顺序, 靠后的优先

z-index元素之间的堆叠顺序

再次强调z-index只适用于已经定位的元素(即position:relative/absolute/fixed)

简单来说就是z-index的值越大优先级越高越靠上, 但是事实上没这么简单

 

子元素的z-index值只在父元素范围内有效,什么意思呢? 

每一个定位元素都归属于一个stacking context。根元素形成root stacking context,而其他的stacking context则由定位元素产生(此定位元素的z-index被定义一个非auto的z-index值),定位子元素会以这个local stacking context为参考,用相同的规则来决定层叠顺序。

当stacking context一样的时候,就用z-index的值来决定怎样显示,如果z-index也相同(即stack level相同),则按照档中后来者居上的原则(back-to-front )的顺序来层叠。

举个例子:

定位元素A(z-index:100)里面有定位元素A1(z-index:300),而定位元素B和元素A兄弟关系(z-index:200)。你会发现无论A1的z-index是多大,也会被z-index是200的B所覆盖,因为A的z-index只有100。

 

z-index的堆叠顺序是比较复杂的, 本篇只介绍一些简单的堆叠顺序, 推荐一个比较详细的说明:

https://www.cnblogs.com/starof/p/4424926.html

 

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值