比尔云BierYun--阿里云最新优惠活动
阿里云优惠码丨阿里云代金券

CSS中层叠和CSS的7阶层叠水平

CSS中层叠和CSS的7阶层叠水平

今天搜索资料时,忽然发现了以前没注意的一个知识点,所以拖过来搞一搞,这个知识点叫做CSS的7阶层叠水平

在说这个知识之前,我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平

这个东西就是z-index属性(此篇为上篇,仅仅讲z-index)

基本含义:

z-index通俗来说就是在Z轴上的索引,Z轴是垂直于电脑屏幕的一根轴

用来设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,即通常情况下,z-index为2的元素会在z-index为1的元素上面

取值情况:

z-index有三个取值

auto:默认。堆叠顺序与父元素相等。

  number:设置元素的堆叠顺序。

inherit:规定应该从父元素继承 z-index 属性的值。

特性:

 

1.支持负值(如果为正数,则离用户更近,为负数则表示离用户更远。)

 

2.支持CSS3 animation动画;(并没什么实用应用场景)

 

3.在CSS2.1时代,需要和定位元素配合使用,如果不考虑CSS3,只有定位元素(position:relative/absolute/fixed/sticky)的z-index才有作用!在CSS3中有例外

准则:

  1.后来者居上原则

复制代码
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .a{
        position: absolute;
        height: 400px;
        width: 400px;
        background-color: yellow;
    }
    .b{
        position: absolute;
        height:400px;
        width: 400px;
        background: red;
        margin-left: 100px;
         }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>
</html>
复制代码

运行结果:

 

解析:我们可以看到,红色作为后来的元素覆盖在之前的元素上了,在未设置z-index的前提下,后来元素会覆盖前面添加到元素,当然实在开启了绝对定位的前提下(不开启绝对定位不能直观的看到效果)

  

  2.谁大谁先上原则

    在.a添加z-index:2,在.b添加z-index:1

运行结果:

    

  解析:通常情况下,z-index越大,层级越高,越在上面

 

  当发生嵌套时,祖先优先原则

  

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .a{
        position: absolute;
        height: 400px;
        width: 400px;
        background-color: yellow;
        z-index: 2;
    }
    .b{
        position: absolute;
        height:400px;
        width: 400px;
        background: red;
        margin-left: 100px;
        z-index: 1
         }
    .a1{
        position: absolute;
        height: 200px;
        width: 200px;
        background-color: aqua;
    }
    .b1{
        position: absolute;
        height: 200px;
        width: 200px;
        background-color: blue;
        z-index: 100
    }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1"></div>
    </div>
    <div class="b">
        <div class="b1"></div>
    </div>
</body>
</html>
复制代码

 

运行结果:

 

解析:按照前面所说应该是蓝色的格子会在最上面,这里并没有,原因就是祖先优先原则

a的层级大于b的层级,所以a里面的元素会始终在b的上面,即使b的子元素的z-index为10000也没用

 

 

注意:

所有主流浏览器都支持 z-index 属性

任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。

 

 

代码成就万世基基沙镇海 梦想永在凌云意意气风发
原文地址https://www.cnblogs.com/suihang/p/10428754.html
未经允许不得转载:阿里云代理商 » CSS中层叠和CSS的7阶层叠水平
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

强烈推荐

高性能SSD云服务器ECS抗攻击,高可用云数据库RDS