css3中的z-index

元素的层叠黄金准则:

1)、谁大谁上:当具有明显的层叠水平标识的时候,如生效的z-index属性值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个

2)】后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素

定位元素与传统层叠上下文

对于position值为relative/absolute以及firfox/IE浏览器(不包括Chrome浏览器)下含有position:fixed声明的定位元素,当其z-index值不是auto的时候,会创建层叠上下文

看两个例子:

<div style="position:relative; z-index:auto;">
        <div style="position:absolute; z-index:2;">1</div>
</div>
<div style="position:relative; z-index:auto;">
    <div style="position:absolute; z-index:1;">2</div>
</div>

例2:

<div style="position:relative; z-index:0;">
        <div style="position:absolute; z-index:2;">1</div>
</div>
<div style="position:relative; z-index:0;">
    <div style="position:absolute; z-index:1;">2</div>
</div>

    

 例1  效果图                                                      例2 效果图

细心的你有没有发现,上面的两个例子中,不同之处就是:第一个例子父级z-index值为auto,第二个例子父级z-index值为0,仅此不同,然后一个是1在上,一个是2在上,为什么呢?别着急,往下看哈

其实单纯从层叠水平上看,实际上z-index:auto和z-index:0是可以看成一样的,注意我说的是单纯从层叠水平上看,实际上两者在层叠上下文领域有着根本性的差异。

z-index:auto所在的div元素是一个普通定位元素,于是他们的子级层叠比较就不受父级影响,两者直接遵循我们上面提到的层叠准则:“谁大谁上”,所以第一个元素的子级z-index:2比第二个元素的子级z-index:1大,所以第一个div就在上面显示

注意:当我们为元素设置了定位(除值为static外),但没有为其设置z-index时,就默认z-index值为auto

而z-index一旦变成数值,哪怕是0,就会创建一个层叠上下文,此时层叠规则就发生了变化,层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。所以两个子级的div层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。这里由于外面两个div元素都是z-index:0;两者的层叠顺序一样大,此时遵循层叠原则中的“后来居上”,根据在DOM文档流中的位置决定谁在上面,于是2就在上面了,所以此时子元素的z-index没有起作用哈



有时我们在网页重构的时候会发现z-index嵌套错乱,这时要看看是不是受父级的层叠上下文元素干扰了,可能就豁然开朗了

注意的一点是:IE6/IE7浏览器,z-index:auto的定位元素也会创建层叠上下文,就是和z-index:0效果一样

position:fixed;,在过去和position:absolute/relative一样,都是需要z-index为数值的时候才会创建层叠上下文,但Chrome等webkit内核浏览器下,position:fixed;元素天然层叠上下文元素,无需z-index为数值

下面我们聊一下关于z-index的一些理解误区

一般我们会说:z-index属性只有和定位元素(position不为static的元素)一起使用的时候,才起作用,那首先这种说法,在css3世界中是站不住脚的哈,因为flex盒子的子元素也可以设置z-index属性

z-index数值越大层级越高:在多数情况下是成立的,但要注意我们上面提到的:层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中,也就是说,如果父元素也是在层叠上下文中,那么他们的子元素的层叠顺序不会越过父级,通俗一点说:

如果A的父级的层叠顺序比B的父级层叠顺序要高,那么即便B的z-index为9999,A的z-index为0,A依然是在B的上面,因为A的父级比B的父级层叠顺序要高


好了,今天就先聊这么多,明天再聊聊z-index为负值的情况哈

参考书籍:张鑫旭的《css世界》,在查阅的时候还看到了一个不错的博客,这里附上链接:z-index


### CSS `z-index` 属性详解 #### 什么是 `z-index` `z-index` 是用于控制 HTML 元素在其堆叠上下文中相对于其他元素的位置的一个属性。它决定了当多个元素在同一位置重叠时,哪个元素应该显示在最上面[^3]。 #### 堆叠上下文的基础规则 每个页面都有一个根堆叠上下文,默认情况下就是 `<html>` 元素本身。新的堆叠上下文可以通过设置某些 CSS 属性创建,比如设置了 `opacity` 小于 1 的元素、具有变换效果的元素以及拥有非静态定位并指定了正数或负数值 `z-index` 的元素等都会形成独立的新一层级结构。 #### 如何使用 `z-index` 为了使 `z-index` 生效,目标元素必须不是默认的静态定位(`position: static`);也就是说,需要将其 `position` 设定为相对定位 (`relative`)、绝对定位 (`absolute`)、固定定位 (`fixed`) 或者粘性定位 (`sticky`) 中的一种形式[^4]。 下面是一个简单的例子展示如何通过改变两个 div 的 `z-index` 来影响它们之间的层次关系: ```css /* 定义样式 */ .one { width: 200px; height: 200px; background-color: red; position: relative; /* 非静态定位 */ z-index: 1; /* 较低层级 */ } .two { width: 150px; height: 150px; background-color: blue; margin-top: -75px; /* 让蓝色方块部分覆盖红色方块 */ position: absolute;/* 绝对定位 */ } /* 默认 auto, 不显式指定则依据父级或其他因素决定其层级 */ ``` 在这个案例里,即使 `.two` 没有被赋予具体的 `z-index` 数值,在大多数现代浏览器中仍然会因为它是绝对定位而自动获得较高的渲染优先级,从而覆盖住 `.one`[^2]。 需要注意的是,如果希望更精确地管理不同元素间的层叠顺序,则应当明确给出各个对象的具体 `z-index` 取值以便更好地掌控视觉表现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值