15 z-index()

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

  • z-index 只能应用在定位的元素之上
  • z-index 默认属性是 auto ,数值取正整数。
  • 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>
————————

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

  • z-index 只能应用在定位的元素之上
  • z-index 默认属性是 auto ,数值取正整数。
  • 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>