堆叠规制以及z-index浅谈

最新推荐文章于 2022-11-04 20:19:00 发布

燃情雪

最新推荐文章于 2022-11-04 20:19:00 发布

阅读量222

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/h1234561234561/article/details/85874114

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

与默认的堆叠上下文规则，z-index较复杂。所以先介绍默认的上下文堆叠规则

（一），默认content堆叠规则（由下至上）
Root element—根元素（如html，body）
nonpositioned element—未定位元素（没有position和opacity属性）
float element—浮动元素（z-index对其无任何效果，且彼此不会覆盖，不含opacity属性）
positioned element—已定位元素（存在position和opacity属性）

代码示例：

<!DOCTYPE html>          
<html>          
<head>          
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
    <title>堆叠层级规则以及z-index应用</title>        
    <style type="text/css"> 
	 
	 *{
		 margin: 0px;
		 padding: 0px;
	 }
	 
	 html,body{
		 background-color: burlywood;
		 padding: 20px;
	 }
	 
      #nonposition-box{
		 width: 1200px;
		 height: 150px;
		 text-align: center;
	  }
	  
	  .nonposition-box1{
		  margin: 20px;
		  background-color: firebrick;
	  }
	  
	  .nonposition-box2{
		  margin: -120px 20px 20px 0px;
		  background-color: aqua;
	  }
	  
	  .abs-box{
		  position: absolute;
		  left: 50px;
		  top: 0px;
		  width: 200px;
		  height: 500px;
		  background-color: #0000FF;
		  opacity: 0.7;
		  text-align: center;
	  }
	  
	  .rel-box{
		  position: relative;
		  top: -200px;
		  left: 50px;
		  width: 200px;
		  height: 500px;
		  background-color: olivedrab;
		  opacity: 0.7;
		  text-align: center;
	  }
	  
	  .flo-box{
		  float: left;
		  margin:-600px 0 0 100px;
		  width: 500px;
		  height: 200px;
		  background-color: orange;
		  text-align: center;
	  }
    </style>        
</head>          
<body> 
    <div id="nonposition-box" class="nonposition-box1">This a nonpositionbox---BOX1</div>
	<div class="abs-box">This is a absbox---BOX2</div>
	<div id="nonposition-box" class="nonposition-box2">This a nonpositionbox---BOX3</div>
    <div class="rel-box">This is a relbox---BOX4</div>
	<div class="flo-box">This is a flobox---BOX5</div>
</body>          
</html>

运行截图：
在这里插入图片描述
值得注意的是：只要含有position或则opacity就为定位元素，且上述规则与html中的顺序无关；若两个div是同等级的，则就按照html顺序判定，越晚越上。

（二），存在z-index时的堆叠规则（仅作用于定位元素，在同一父类中，数值越大，z轴方向越高，堆叠位置越上且不高于父类上级）。

代码示例：

<!DOCTYPE html>          
<html>          
<head>          
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
    <title>堆叠层级规则以及z-index应用</title>        
    <style type="text/css"> 
	 
	 *{
		 margin: 0px;
		 padding: 0px;
	 }
	 
	 html,body{
		 background-color: burlywood;
		 padding: 20px;
	 }
	  
	  .abs-box{
		  position: absolute;
		  left: 50px;
		  top: 0px;
		  width: 200px;
		  height: 500px;
		  background-color: #0000FF;
		  opacity: 0.7;
		  text-align: center;
		  z-index: 3;
	  }
	  
	  .rel-box{
		  position: relative;
		  top: 0px;
		  left: 150px;
		  width: 200px;
		  height: 500px;
		  background-color: olivedrab;
		  text-align: center;
		  z-index: 2;
	  }
	  
	  .rel-box1{
		  position: inherit;
		  width: 300px;
		  height: 150px;
		  background-color: beige;
		  opacity: 0.7;
		  z-index: 5;
	  }
	  
	  .rel-box2{
		  position: inherit;
		  top: -50px;
		  left: 50px;
		  width: 300px;
		  height: 150px;
		  color: darkblue;
		  opacity: 0.7;
		  background-color: red;
		  z-index: 4;
	  }
	  
	  .opa-box{
		  opacity: 0.7;
		  margin:-400px 0 0 100px;
		  width: 500px;
		  height: 200px;
		  background-color: orange;
		  text-align: center;
		  z-index: 1;
	  }
    </style>        
</head>          
<body> 
    <div class="abs-box">This a BOX1</div>
	<div class="rel-box">
		This a BOX2
	<div class="rel-box1">BOX2---box1</div>
	<div class="rel-box2">BOX2---box2</div>
	</div>
	<div class="opa-box">This a BOX3</div>
</body>          
</html>

运行截图：
在这里插入图片描述
值得注意：BOX1的z-index=3；B0X2—box1和B0X2—box2的z-index分别为5，4；但是却是BOX1在最上面。这是因为B0X2—box1，B0X2—box2的z-index无论多大都是在BOX1这个父类的堆叠content内，所以其子代是怎末都不会高于其父类的高一级，因为不在同一层次的堆叠content内；反推B0X2子代z-index无论多小，都不会低于BOX1.

推荐网站
菜鸟爬行中…

燃情雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
堆叠规制以及z-index浅谈

与默认的堆叠上下文规则，z-index较复杂。所以先介绍默认的上下文堆叠规则（一），默认content堆叠规则（由下至上）Root element—根元素（如html，body）nonpositioned element—未定位元素（没有position和opacity属性）float element—浮动元素（z-index对其无任何效果，且彼此不会覆盖，不含opacity属性）pos...
复制链接

扫一扫