前端——css z-index

文章目录

特点

  • 1.z-index值没有单位,就是一个正整数,默认的z-index值为0,定义层级遮盖效果,数值较大的显示在前面。
  • 2.只有定位了的元素,相对定位,绝对定位,固定定位,才能有z-index,而浮动元素不能使用z-index。
  • 3.如果没有z-index值,或者z-index值一样,后面的元素层级高,定位了的元素层级高于没有定位的元素。
  • 4.如果是嵌套在两个父盒子里的子盒子有重叠时,以父盒子z-index值为准,值一样再比较子盒子值。、
  • 主要是导航栏始终显示在前,两个元素重叠时定义层级。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		
		*{
			padding: 0;
			margin: 0

		}
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			position:relative;
			top: 30px;
			left: 40px;
			z-index: 3;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: yellow;
			position: relative;
			top: 0;
			left: 0;
			z-index: 2;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
			margin-left: 20px;
			margin-top: -30px;

		}
	</style>
</head>
<body>
	  <div class="box1"></div>
	 <div class="box2"></div>
	 <div class="box3"></div>


	
</body>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Light__1024/article/details/86772544