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

2021/8/24 23:36:28

编程Tag： 属性 css index 10 float left 盒子 100px

本文主要是介绍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属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

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

z-index属性

代码演示

相关编程文章