Fork me on GitHub

z-index

发表于 | 分类于

我曾经遇到过这样一个面试题，a和b为兄弟结构标签，c为a的子标签，当a标签的z-index为1，b为2，c为3时，页面该如何布局？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class='a'>a
  <div class='c'>c</div>
</div>
<div class='b'>b</div>

<style>
  .a, .b {
	width: 100px;
	height: 100px;
  }
  .a {
	position: absolute;
	z-index: 1;
	background: green;
  }
  .b {
	position: absolute;
	top: 60px;
	left: 60px;
	z-index: 2;
	background: blue;
  }
  .c {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 3;
	width: 60px;
	height: 60px;
	background: orange;
  }
</style>

你想到该如何布局了吗？

跟浮动不一样的是，z-index是将元素抽离到更高层面进行定位，并不会影响到他原来的布局(在具有z-index属性后面的元素仍然是从z-index元素占据的开始位置进行布局，并保持着原来的特性和方式进行布局)。

z-index默认值为0，当多个元素具有z-index属性时，数字越大的显示时越在上面。

但要考虑到的一个情况是：如果父元素和子元素同时具有z-index属性时，要优先考虑父元素的z-index。即使子元素的z-index比父元素大，实际显示时也是以父元素的为准。父元素包裹着子元素，将子元素的z-index降为和父元素保持一致。

W3C 对 z-index 属性的描述中提到在 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效。

浏览器实际展示效果如下：
z-index定位
c为a的子元素，但父级a具有z-index属性，以父元素为准，所以a和c的z-index都为1，b的z-index为2，所以b在最上面

想象一下，在三维坐标轴中，z轴代表物体的高度，当给物体加上z-index属性时，物体就具有了空间感，就能根据z-index对物体进行定位。

情形1：
上面提到的是，z-index后面的元素会依照元素的性质从z-index元素占据的开始位置进行布局显示，于是我在具有z-index属性的元素后面添加了一些元素，来查看页面的布局到底是怎样的？

修改后的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class='a'>a
  <div class='c'>c</div>
</div>
<div class='b'>b</div>
<span>sssssssssggggggssssssrrrrrrrrr</span>
<div class='content'></div>

<style>
  .a, .b {
	width: 100px;
	height: 100px;
  }
  .a {
	position: absolute;
	z-index: 1;
	background: green;
  }
  .b {
	position: absolute;
	top: 60px;
	left: 60px;
	z-index: 2;
	background: blue;
  }
  .c {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 3;
	width: 60px;
	height: 60px;
	background: orange;
  }
  .content{
	width: 170px;
	height: 170px;
	background: #555;
  }
</style>

浏览器中显示如下：
其他元素的位置显示

情形2：
当父元素和子元素同时具有z-index属性时，会优先考虑父元素的z-index并以父元素为准。但当父元素没有z-index属性时，页面是否会根据z-index的数值大则在最上面排列来进行显示呢？

修改最开始的代码，去掉父级a的z-index属性，此时具有z-index的只有子级c和元素b, c的z-index为3，b为2，此时页面会怎么显示呢？

浏览器中显示情况：
父级没有z-index时

情形3：
对于同样的元素，当页面中直接没有z-index属性时，又该如何显示呢？

修改代码，去掉所有的z-index属性，查看页面显示。

没有z-index时

可以看到的是，此时页面显示和一开始元素都具有z-index属性时一致。这只是因为每个元素都具有position属性，具有position属性的元素会根据给元素设置的位置进行定位显示。

position: absolute;绝对定位。b此时会根据浏览器进行定位显示，再因为b元素排列在a元素后面，所以b元素会排列在最上层，于是就有了如图所示的显示。

对于同样的标签，当给他设置的是浮动属性而不是z-index时，将会发生什么呢？

同样的，改变z-index为float，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class='a'>a
  <div class='c'>c</div>
</div>
<div class='b'>b</div>

<style>
  .a, .b {
	width: 100px;
	height: 100px;
  }
  .a {
	float: left;
	background: green;
  }
  .b {
	float: left;
	background: blue;
  }
  .c {
	float: left;
	width: 60px;
	height: 60px;
	background: orange;
  }
</style>

浏览器中展示如下：
float布局
具有浮动属性的元素将会脱离正常的文档流，被抽离到更高层面进行定位，所以a和b并排在一起，a里面包裹着他的子元素c。