CSS的z-index属性用法详解

最新推荐文章于 2024-02-01 12:27:26 发布

灵活的二胖子

最新推荐文章于 2024-02-01 12:27:26 发布

阅读量2.4k

点赞数 3

分类专栏： web前端文章标签： css html 定位 z-index

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

z-index 属性相当重要，如果对此没有全面精准的把握，往往会导致意想不到的问题。例如，尽管一个对象的z-index属性值设置很大，但是它还是无法覆盖z-index属性值较小的对象。下面咱们就来全面的介绍一下此属性的用法。
z-index属性用来定义对象的层叠顺序，下面就来分步介绍一下:
一.未使用position属性的对象之间比较：
如果对象没有定义position或者position属性值为static，那么在文档流后面的对象能够覆盖文档流前面的对象，具体请参阅未设置position属性的对象的层叠顺序一章节。z-index属性对于没有定义position属性或者position属性值为static的对象没有任何效果。
二.使用position属性和未使用position属性的对象比较:

使用position属性的对象能够覆盖未使用position属性或者position属性值为static的对象。例如:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
}
.a{
  position:relative;
  right:20px;
  top:20px;
  background-color:red;
}
.b{
  background-color:green;
}
</style>
</head>
<body>
  <div class="a"></div>
  <div class="b"></div>
</body>
</html>

注意 :如果z-index设置为负数，也会被未使用position属性或者position属性值为static的对象覆盖。
三.设置position属性对象之间的比较:
设置了position属性，且属性值不为static时它们的层级关系是怎样的呢，下面再来分布介绍一下:
1. 相同层级的对象根据z-index属性值来确定层级关系，z-index属性值大的对象覆盖在属性值小的对象上面。例如:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
}
.a{
  position:relative;
  right:20px;
  top:20px;
  background-color:red;
  z-index:1;
}
.b{
  background-color:green;
  position:relative;
  z-index:2;
}
</style>
</head>
<body>
  <div class="a"></div>
  <div class="b"></div>
</body>
</html>

以上代码中，z-index属性值大的div遮盖了z-index属性值比较小的div。
2.相同层级的对象的z-index属性值相同时，文档中后面的对象能够覆盖前面的对象。例如:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
}
.a{
  position:relative;
  left:80px;
  top:180px;
  background-color:red;
  z-index:1;
}
.b{
  background-color:green;
  position:relative;
  z-index:1;
}
</style>
</head>
<body>
  <div class="a"></div>
  <div class="b"></div>
</body>
</html>

以上代码中，两个div的z-index是相同的，所以后面的对象层级高于前面的对象，也可以看出所谓的前后是指对象在文档中的书写顺序，而不是在页面上的表现顺序。
3.如果父对象的层级高，那么子对象的层级也高。例如:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:200px;
  height:200px;
}
.a{
  position:relative;
  right:20px;
  top:20px;
  background-color:red;
  z-index:1;
}
.b{
  background-color:green;
  position:relative;
  z-index:2;
}
.a .a-1{
  background-color:yellow;
  width:100px;
  height:100px;
  position:relative;
  top:100px;
  left:50px;
  z-index:100;
}
.b .b-1{
  background-color:black;
  width:100px;
  height:100px;
  position:relative;
  top:-20px;
  z-index:1;
}
</style>
</head>
<body>
<div class="a">
  <div class="a-1"></div>
</div>
<div class="b">
  <div class="b-1"></div>
</div>
</body>
</html>

以上代码可以看出，尽管a-1对象设置z-index值比b-1的z-index值要大，但是由于父对象的层级低，所以它还是被b-1给遮盖。这就是为什么有时候给一个对象设置的z-index很大，还是无法覆盖其他对象。
四.关于层级的介绍:
在上面的文章中专门用红色字体标出了层级，这里来特别介绍一下。使用position属性（除去属性值为static）定位，并且z-index被正整数赋值的对象会单独形成一个层级树，而没有使用position属性（属性值为static的对象算是没有使用position属性）定位的对象也是单独一个层级树。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:200px;
  height:200px;
}
.a{
  right:20px;
  top:20px;
  background-color:red;
}
.b{
  background-color:green;
  position:relative;
  z-index:2;
}
.a .a-1{
  background-color:yellow;
  width:100px;
  height:100px;
  position:relative;
  top:100px;
  left:50px;
  z-index:100;
}
.a .a-1 .a-1-1{
  background-color:blue;
  width:50px;
  height:50px;
}
.b .b-1{
  background-color:black;
  width:100px;
  height:100px;
  position:relative;
  top:-20px;
  z-index:1;
}
</style>
</head>
<body>
<div class="a">
  <div class="a-1">
    <div class="a-1-1"></div>
  </div>
</div>
<div class="b">
  <div class="b-1"></div>
</div>
</body>
</html>

以上代码中，具有两个层级树，一个是具有定位的层级树，一个是不具有定位的层级树。图示如下:

以上图片就是具有定位的对象的层级树。

以上图片就是不具有定位的对象的层级树。
最后的总结:
1.定位对象能够遮盖非定位对象，除非定位对象的z-index值为负数。
2.同层级定位对象z-index大的能够覆盖z-index值小的。
3.同层级定位对象如果z-index相同，则后面的层级高于前面的。
4.如果父定位对象层级高，那么此父定位对象的子对象的层级也要高。

灵活的二胖子

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS的z-index属性用法详解

z-index属性相当重要，如果对此没有全面精准的把握，往往会导致意想不到的问题。例如，尽管一个对象的z-index属性值设置很大，但是它还是无法覆盖z-index属性值较小的对象。下面咱们就来全面的介绍一下此属性的用法。z-index属性用来定义对象的层叠顺序，下面就来分步介绍一下:一.未使用position属性的对象之间比较：如果对象没有定义position或者position属性
复制链接

扫一扫