快捷导航
蚂蚁部落 网站首页 前端教程 CSS教程 查看内容

栏目导航

≡基础教程≡

≡样式≡

≡盒模型≡

≡定位≡

≡简单选择器≡

≡结构性伪类选择器≡

≡动态伪类选择器≡

≡UI元素伪类选择器≡

≡打印伪类选择器≡

≡伪元素选择器≡

≡属性选择器≡

≡进阶知识≡

CSS z-index属性

2017-9-15 17:04| 发布者: admin| 查看: 959| 评论: 0|来自: 蚂蚁部落

一.z-index基本概念:

如果元素position属性值被设置为fixed、relative和absolute,就可以使用z-index规定它们的层叠顺序。

语法结构:

[CSS] 纯文本查看 复制代码
z-index: auto|<integer>|inherit

参数解析:

(1).auto:默认,层叠顺序与父元素相等。

(2).number:设置元素的堆叠顺序,可以是负数。

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

特别说明:

(1).此属性不会作用于窗口控件,如select元素。

(2).IE8和IE8以下浏览器不支持inherit属性值。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.index1, .index2, .index3{
  position:absolute;
  width:150px;
  height:100px;
}
.index1{
  z-index:1;
  background-color:#663
}
.index2{
  z-index:2;
  top:50px;
  left:50px;
  background-color:#303
}
.index3{
  z-index:3;
  top:100px;
  left:100px;
  background-color:#090
}
</style>
</head>
<body>
  <div class="index1">index1</div>
  <div class="index2">index2</div>
  <div class="index3">index3</div>
</body>
</html>

z-index属性值大的元素能够覆盖再属性值小的元素之上。

二.非定位元素的层叠顺序:

在介绍z-index属性对层叠顺序的影响之前,先介绍一下非定位元素的层叠顺序。

如果对象没有设置position属性或者属性值为static的话,对象的层叠顺序是以它们在文档流的顺序作为基准的,也就是文档流后面的对象能够遮盖文档流前面的对象。代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div a{
  float:left;
  width:100px;
  height:100px;
  color:black;
  text-align:center;
  line-height:100px;
  text-decoration:none;
}
.ant-1{background-color:red;}
.ant-2{background-color:blue;}
.ant-3{
  background-color:green;
}
div a:hover{
  width:140px;
  height:100px;
  margin-left:-40px;
}
</style>
</head>
<body>
<div> 
  <a href="#" class="ant-1">蚂蚁部落一</a> 
  <a href="#" class="ant-2">蚂蚁部落二</a> 
  <a href="#" class="ant-3">蚂蚁部落三</a> 
</div>
</body>
</html>

把鼠标放在各个元素上就能看出层级顺序。

三.使用position属性和未使用position属性的对象比较:

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

[HTML] 纯文本查看 复制代码运行代码
<!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属性值大的对象覆盖在属性值小的对象上面。

[HTML] 纯文本查看 复制代码运行代码
<!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属性值相同时,文档中后面的对象能够覆盖前面的对象。

[HTML] 纯文本查看 复制代码运行代码
<!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).如果父对象的层级高,那么子对象的层级也高。

[HTML] 纯文本查看 复制代码运行代码
<!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属性)定位的对象也是单独一个层级树。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!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>

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

a:3:{s:3:\"pic\";s:43:\"portal/201702/05/131707b1qqckqe6kkke0ek.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201702/05/131737k4w1ho535sc4asa7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

最后的总结:

(1).定位对象能够遮盖非定位对象,除非定位对象的z-index值为负数。

(2).同层级定位对象z-index大的能够覆盖z-index值小的。

(3).同层级定位对象如果z-index相同,则后面的层级高于前面的。

(4).如果父定位对象层级高,那么此父定位对象的子对象的层级也要高。

关于元素层叠更多知识可以参阅CSS 层叠顺序一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-19 02:22 , Processed in 0.070864 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部