层叠和z-index的设置-编程入门课：CSS(3)从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：CSS(3)从入门到实战

CSS层叠和z-index的设置是Web开发中非常重要的一部分。在Web页面中，元素会被浏览器渲染成一个个图层，而层叠就是指不同图层之间的叠放关系。通过层叠，我们可以控制页面上不同元素的显示顺序和优先级，从而实现更加灵活和多样化的页面布局效果。

CSS层叠顺序

在CSS中，每个元素都有自己的层叠顺序。元素的层叠顺序决定了它在图层中的优先级，即哪个元素会显示在哪个元素的上面。当两个元素重叠时，层叠顺序的优先级高的元素会显示在顶部。

CSS层叠顺序通常由以下因素决定：

元素类型：一些元素天生就具有更高的层叠顺序。例如，position属性值为fixed或sticky的元素，会显示在其他元素的上方。

层叠上下文：元素的层叠顺序还受到其所处的层叠上下文的影响。一个元素的层叠上下文是由其某些CSS属性的值决定的，例如，z-index属性、opacity属性、transform属性等。

z-index属性：当元素的z-index属性值不同时，具有较高z-index属性值的元素会在图层中处于较高位置。

文档流中的顺序：当以上条件相同时，先出现在文档流中的元素会在图层中处于较高位置。

z-index属性

z-index属性是CSS中控制层叠顺序的重要属性。它用来指定一个元素在图层中的层叠顺序。z-index属性值越高，元素在图层中的位置越高，即越靠近顶部。z-index属性只对position属性值为relative、absolute、fixed、sticky的元素起作用。

语法如下：

```
z-index: auto|number|initial|inherit;
```
其中，z-index属性的值可以是以下之一：

auto：浏览器会根据元素在文档流中的顺序来确定层叠顺序。

number：整数值，用来明确指定元素在图层中的层叠顺序。

initial：默认值，表示使用浏览器的默认值。

inherit：表示继承父元素的z-index属性值。

z-index属性值大于0时，元素会被放在前景层，即处于图层的最顶部。z-index属性值小于0时，元素会被放在背景层，即处于图层的最底部。如果多个元素有相同的z-index属性值，则它们的层叠顺序将由它们在文档流中的顺序决定。具有更高z-index属性值的元素会覆盖具有更低z-index属性值的元素。

示例代码

下面是一个简单的示例代码，用来演示z-index属性的使用方法。

```
<!DOCTYPE html>
<html>
<head>
	<title>Z-index Example</title>
	<style type="text/css">
		.box1 {
			position: relative;
			background-color: #f00;
			width: 200px;
			height: 200px;
			margin: 20px;
			z-index: 1;
		}
		.box2 {
			position: absolute;
			background-color: #00f;
			width: 150px;
			height: 150px;
			top: 50px;
			left: 50px;
			z-index: 2;
		}
		.box3 {
			position: absolute;
			background-color: #0f0;
			width: 100px;
			height: 100px;
			top: 100px;
			left: 100px;
			z-index: -1;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>
```
在上面的代码中，我们定义了三个div元素，分别为.box1、.box2和.box3。其中，.box1的position属性值为relative，z-index属性值为1；.box2和.box3的position属性值为absolute，分别设置了它们的top、left属性值，并且分别设置了不同的z-index属性值。

.box2的z-index属性值为2，比.box1的z-index属性值高，所以.box2元素会显示在.box1元素的上面。而.box3的z-index属性值为-1，比.box1的z-index属性值低，所以.box3元素会显示在.box1元素的下面。

通过设置不同的z-index属性值，我们可以控制不同元素在图层中的层叠顺序，从而实现更加灵活和多样化的页面布局效果。

该分类下的相关小册推荐：

编程入门课：HTML(5)从入门到实战