关于css:CSS巧技-你不知道的zIndex层级问题

前言

问题:# 为什么z-index值大的却在z-index小的上面?

上面带你一探到底

css为盒模型的布局提供了三种不同的定位计划

  • 失常文档流
  • 浮动
  • 定位

最初一种计划(特指相对定位)将会把元素从失常文档流中齐全移走,其最终的落脚点将取决于开发者。

通过设置 top,left,bottom 和 right 的值,你能够在二维空间中对元素进行定位,但 CSS 同时也容许你应用 z-index 把它搁置在三维空间中。

外表看起来,z-index 仿佛是一个很简略的属性,你给它设置哪个值,元素就会位于 y 轴的哪个地位,就这样。但它实际上并没有咱们设想的这么简略,这个属性背地是一系列决定元素所在层级的规定。

z-index的根底概念

x 轴代表程度方向,y 轴代表垂直方向,z 轴则代表咱们的眼光向页面(屏幕)看进去的时候,各元素的布局状况。

屏幕是一个二维立体,所以咱们实际上是看不到z轴的,z轴实际上是通过透视的模式展现的。也就是说,多个元素共享同一块二维平民啊时,友得元素在顶部,有的元素在底部,因而而感触到z轴的存在。

css容许咱们给z-index设置三种值来决定某个元素在z轴方向上的地位。

  • auto(默认值) 重叠程序与父元素相等
  • number 元素的重叠程序,能够为正整数,负整数或者0
  • inherit 规定应该从父元素继承z-index属性的值

如果两个元素在定位之后共享同一块二维空间,那么在这块空间中,z-index越大的元素将会笼罩z-index较小的元素。

层叠上下文和层叠等级

什么是层叠上下文?

MDN定义:咱们假设用户侧面向(浏览器)视窗或网页,而 HTML 元素沿着其绝对于用户的一条虚构的 z 轴排开,层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性依照优先级程序占据这个空间。

什么是层叠等级?

在层叠上下文中,子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被主动视为父级层叠上下文的一个独立单元。这样就产生了层叠等级,层叠上下文依据层叠等级决定元素在页面的层叠程序。

在一个层叠上下文中,一共可能呈现七个层叠等级,从最低到最高排列,顺次是:

等级 层叠元素
1 背景和边框 :造成层叠上下文的元素的背景和边框,它是整个上下文中层叠等级最低的
2 Z-Index 为正数 :设置了 z-index 为正数的子元素以及由它所产生的层叠上下文
3 块级盒模型:位于失常文档流中的、块级的、非定位的子元素
4 浮动盒模型 :浮动的、非定位的子元素
5 内联盒模型 :位于失常文档流中的、内联的、非定位的子元素
6 Z-index 为 0:设置了 z-index 为 0 的、定位的子元素以及由它所产生的层叠上下文
7 Z-Index 为负数 :设置了 z-index 为负数的、定位的子元素以及由它所产生的层叠上下文,它是整个上下文中层叠等级最高的

总结:

  • 层叠上下文能够蕴含在其余层叠上下文中,并且一起创立一个层叠上下文的层级。
  • 每个层叠上下文都齐全独立于它的兄弟元素:当解决层叠时只思考子元素。
  • 每个层叠上下文都是自蕴含的:当一个元素的内容产生层叠后,该元素将被作为整体在父级层叠上下文中按程序进行层叠。

Note:  层叠上下文的层级是 HTML 元素层级的一个子级,因为只有某些元素才会创立层叠上下文。能够这样说,没有创立本人的层叠上下文的元素会被父层叠上下文异化

示例

每个被定位的元素都创立了单独的层叠上下文,因为他们被指定了定位属性和 z-index 值。咱们把层叠上下文的层级列在上面:

  • Root

    • DIV #1
    • DIV #2
    • DIV #3

      • DIV #4
      • DIV #5
      • DIV #6

        留神 DIV #4,DIV #5 和 DIV #6 是 DIV #3 的子元素,所以它们的层叠齐全在 DIV #3 中被解决。一旦 DIV #3 中的层叠和渲染解决实现,DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root(根)元素进行层叠。

        这几个div在层叠上下文的层叠等级顺次是:DIV #1 > DIV #4 > DIV #6 > DIV #5 > DIV #3 > DIV #2 > Root。

案例展现

最初咱们再来看一个案例,解释为什么z-index值大的元素却在z-index小的元素上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            padding: 20px;
        }
        .one,
        .two,
        .three,
        .four {
            position: absolute;
            font-size: 50px;
        }
        .one {
            width: 400px;
            height: 400px;
            background: red;
            top: 100px;
            left: 200px;
            z-index: 10;
        }
        .two {
            background: aqua;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            z-index: 100;
        }
        .three {
            background: blue;
            width: 200px;
            height: 200px;
            top: 100px;
            left: 100px;
            z-index: 150;
        }
        .four {
            background: green;
            width: 200px;
            height: 200px;
            top: 250px;
            left: 350px;
            z-index: 50;
        }
    </style>
</head>
<body>
    <div class="one">
        1
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="four">4</div>
</body>
</html>

来看看效果图

因为div.two和div.three在div.one中,所以它的z-index是和div.one的层叠上下文是相干的。理论体现进去的z-index是上面这样的:

元素 z-index值
.one 10
.two 10.100
.three 10.150
.four 50

论断: div.one 和外部蕴含的所有将会在层级上低于 div.four,无论给 div.one 的子元素设置多大的 z-index,子元素的层级都无奈超过 div.four。

最初: 看完了下面的这个案例,置信此时你对一个很大的z-index值却不能显示在一个小的z-index的值的下面有了了解了吧。

总结:定位元素能够创立新的层叠上下文,在这个上下文中的所有层叠等级,都会高于或者低于另一个层叠上下文的所有层叠等级。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据