有关 Z-index

时间 2019-11-11

标签有关 index 繁體版

原文原文链接

在开始Z-index以前css

首先须要理解两个概念，一是文档，二是普通文档流。html

我对文档的理解是：用必定的方式把人类文明呈现出来，而且能够复制来进行传播，因此思想跟精神不能算文档。浏览器

而书籍跟这篇帖子的主角——网页都算做文档。测试

咱们所浏览的网页，其实就是HTML或者XHTML或者XML文档，它们之间的区别咱们暂时能够不用考虑，咱们只须要考虑网页文档跟其余文档的区别。网页文档就是将文本内容以不一样的方式组织起来、用不一样的方式表现出来。为了达到这一目的，咱们须要规范化用一些元素来固定地表现某一种方式，因而标签便产生了。好比咱们须要一张表格来装数据，那么咱们定义一个<table></table>就产生一个表格，咱们即可以把文本数据放到这个标签里，文本内容便会以一个表格的方式表现出来，其余相似，咱们须要表现一张图像，便用<img>，须要一个列表，用<ul></ul>。（若是直接把文本放到HTML文档中，会默认给他加上一个块级标签，详情见《精通CSS 高级Web标准解决方案第二版》P44，感谢崔瑜琢兄，他送了我这本书）ui

当咱们用这些标签把咱们的内容组织起来后，便交给浏览器解析，浏览器解析后即是咱们看到的网页了。（不一样的浏览器解析的结果不一样，这就是浏览器差别性）spa

这些标签在文档里会安分地排列，都会依据本身所包含的内容井水不犯河水地排列。例如，块级元素会一行一行地排列，行级元素会挨次排成一行。它们都有本身的区域，彼此不产生交集，这就是普通文档流。xml

有两种方式能够打破普通文档流的方式，让他们的排列有一点点小小的错动，这就是浮动跟定位。这种错动极可能是两个标签重叠到一块儿去了，那么让谁显示出来呢，谁挡住谁呢。因而Z-index出场了。htm

测试代码以下：blog

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Z-index</title>
<style type="text/css">

div{width:200px;
height:200px;
}
body{
padding:20px;
z-index:auto;
}
#div1{
z-index:auto;
background:#000;
position:absolute;
top:0;
left:0;
color:#FFF;
}
#div2{
z-index:1;
background:#999;
top:80px;
left:80px;
position:absolute;
}
#div3{
z-index:1;
background:#000;
color:#FFF;
top:80px;
left:80px;
position:absolute;
}
#div4{
z-index:1;
background:#0CF;
color:#03F;
top:180px;
left:250px;
position:absolute;
width:100px;
height:100px;
}
#div5{
z-index:auto;
background:#CC0;
color:#03F;
top:260px;
left:280px;
position:absolute;
width:100px;
height:100px;
text-align:right;
}
#div6{
z-index:auto;
background:#33C;
color:#FFF;
top:280px;
left:300px;
position:absolute;
text-align:right;
}
</style>
</head>

<body>
<div id="div1">div1</div>
<div id="div2">
div2
<div id="div3">
div3
</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
</div>
<div id="div6">div6</div>
</body>
</html>

FF9.0.1测试图：utf-8

最后获得的结论是：

1.取值为auto跟取值为0效果是同样的。

2.元素在文档中的叠加顺序跟他们的父元素在文档中的顺序有关，也就是说，若是他们的父元素比他们的叔伯（也有多是舅舅）元素层叠次序高，那么他们在文档中的总体层叠次序就高——比他们的叔伯还高——而不用管他们自己的Z-index跟他们的叔伯的Z-index大小

3.若是他们同辈，那么就取决于他们自身的Z-index，负数最小，0次之，正数最大，越大越往上叠。

4.若是全部同辈元素的Z-index取值都同样，那么谁最后出如今文档中，层叠次序就最高。

5.子元素总比父元素的层叠次序高，无论他们的Z-index取值多少。

PS：相对定位是相对于元素在普通文档流中原本占据的位置来定位

绝对定位是相对于最近的一个已定位的父辈元素，绝对定位相对定位都可

固定定位是相对于浏览窗口来定位，不管怎么拖动右边或者底部的滑条，位置都不变

如有错误，欢迎大牛批评指正！