z-index

最新推荐文章于 2023-06-27 23:45:17 发布

czw10000

最新推荐文章于 2023-06-27 23:45:17 发布

阅读量165

点赞数

分类专栏： javaEE HTML 文章标签： java

本文链接：https://blog.csdn.net/weixin_48722971/article/details/111705414

版权

javaEE 同时被 2 个专栏收录

88 篇文章 2 订阅

订阅专栏

HTML

21 篇文章 0 订阅

订阅专栏

z-index

z-index 可以改变定位流中的前后加载顺序。

定位流中有以下规律

1.默认情况下定位流会覆盖标准流

2.默认情况下后面的会覆盖前面的

3.定位流中设置z-index,是一个整数数值，谁的大谁就在上面

如果父元素设置z-index,子元素的z-index就会失效，谁的父元素大，谁就显示上方(从父原则)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Z-index的使用</title>
<style type="text/css">
	*{
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
	
	div {
		height: 200px;
		width: 200px;
		border: 1px solid red;
    }
    
	.div01{
		background-color: green;
		position: absolute;/* 定位流 */
		z-index: 101;
	}
	
	.div02{
		background-color: purple;
		position: fixed;/*  定位流*/
		/* left:600px; */
		z-index: 1;
	}
	
	.div03{
		background-color: pink;
		position: relative; /* 定位流 */
		/* left: 200px; */
		z-index: 10;
		
	}
	
	.div04{
	
		background-color: cyan;
	}

</style>
</head>

<body>
	<div class="div01"> </div>
	<div class="div02"> </div>
	<div class="div03"> </div>
	<div class="div04"> </div>
</body>
</html>