其他分享
首页 > 其他分享> > 15 z-index

15 z-index

作者：互联网

这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。

  1. z-index 只能应用在定位的元素之上
  2. z-index 默认属性是 auto ，数值取正整数。
  3. z-index 值表示谁压着谁，数值大的压盖住数值小的，
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>z-index</title>
	<style type="text/css">
		.a{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			z-index: 1;
		}
		.b{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			top: -30px;
			left: 50px;
			z-index: 3;
		}
		.c{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			top: -50px;
			left: 100px;
			z-index: 10;
		}
	</style>
</head>
<body>
	<div class="a">A</div>
	<div class="b">B</div>
	<div class="c">C</div>
</body>
</html>

如果出现嵌套的 z-index ，那么子标签跟随父标签 z-index 值；也就是说父标签牛逼了，儿子标签也跟着牛逼

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>z-index</title>
	<style type="text/css">
		.a{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			z-index: 1;
		}
		.b{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			top: -30px;
			left: 50px;
			z-index: 1000;
		}
		.c{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			top: -50px;
			left: 100px;
			z-index: 10;
		}
	</style>
</head>
<body>
	<div style="position: relative;z-index: 15;">
		<div class="a">A</div>
	</div>
	<div style="position:relative;z-index: 10;">
		<div class="b">B</div>
	</div>
	<div class="c">C</div>
</body>
</html>

标签：index,15,3962FE,color,height,relative,border
来源： https://www.cnblogs.com/it-lkp/p/16553593.html