CSS中z-index元素的层级

最新推荐文章于 2023-10-02 07:03:34 发布

weixin_46177342

最新推荐文章于 2023-10-02 07:03:34 发布

阅读量230

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46177342/article/details/127552391

版权

定位position的可选值有：

* static，默认值，元素是静止的，不开启定位

* relative，开启元素的相对定位

* absolute，开启元素的决定定位

* fixed ，开启元素的固定定位

* sticky ，开启元素的粘滞定位

对于开启了定位的元素，可以通过z-index来指定元素的层级，

z-index 接收一个整数作为参数，值越大，元素的层级越高，层级越高越优先显示

如果元素的层级一样，则优先显示靠下的元素

祖先元素的层级再高，也不会盖过后代元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素的层级</title>
		<style type="text/css">
			body{
				font-size: 50px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: green;
				position: absolute;
				z-index: 1;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 50px;
				left: 50px;
				z-index: 2;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				top: 90px;
				left: 90px;
				z-index: 3;
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</body>
</html>

代码运行结果如下：