CSS教程

CSS学习笔记10-z-index属性

本文主要是介绍CSS学习笔记10-z-index属性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

CSS学习笔记10——z-index属性

z-index属性

z-index 属性指定一个元素的堆叠顺序。

比如说,两个盒子之间有重叠,那么是盒子1覆盖盒子2,还是盒子2覆盖盒子1,取决于两个盒子的z-index属性值的大小,属性值大的会覆盖属性值小的。

使用示例:

z-index: 10;

代码演示

首先产生三个有重叠的盒子,不指定z-index值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>z-index属性</title>
	<style type="text/css">
		.b1{
			width: 100px;
			height: 100px;
			background: green;
			float: left;
			position: relative;

		}

		.b2{
			width: 100px;
			height: 100px;
			background: red;
			float: left;
			position: relative;
			top: 50px;
			left: -50px;
			
		}

		.b3{
			width: 100px;
			height: 100px;
			background: blue;
			float: left;
			position: relative;
			top: 100px;
			left: -100px;
			
		}

	</style>

</head>
<body>
	<div class="b1"></div>
	<div class="b2"></div>
	<div class="b3"></div>
</body>
</html>

显示效果如下:
在这里插入图片描述

可见,默认后面的盒子会覆盖前面的,当我们为每个盒子指定z-index值时:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>z-index属性</title>
	<style type="text/css">
		.b1{
			width: 100px;
			height: 100px;
			background: green;
			float: left;
			position: relative;
			z-index: 10;

		}

		.b2{
			width: 100px;
			height: 100px;
			background: red;
			float: left;
			position: relative;
			top: 50px;
			left: -50px;
			z-index: 3;
			
		}

		.b3{
			width: 100px;
			height: 100px;
			background: blue;
			float: left;
			position: relative;
			top: 100px;
			left: -100px;
			z-index: 6;
			
		}

	</style>

</head>
<body>
	<div class="b1"></div>
	<div class="b2"></div>
	<div class="b3"></div>
</body>
</html>

显示效果为:
在这里插入图片描述

由于我们将红色盒子的z-index设为三个盒子中的最小,因此,当有重叠部分时,其他盒子会堆叠在红色盒子上。

注意:IE浏览器不支持z-index属性

这篇关于CSS学习笔记10-z-index属性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!