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

最新推荐文章于 2023-07-03 18:10:27 发布

糯米味儿的粽子

最新推荐文章于 2023-07-03 18:10:27 发布

阅读量374

点赞数

分类专栏： # CSS 文章标签： css html5 css3

本文链接：https://blog.csdn.net/emmm520/article/details/119900903

版权

CSS z-index 堆叠顺序重叠元素前端开发

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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>