层叠顺序与层叠上下文

一.层叠顺序

所谓层叠顺序就是用户看到页面视角z轴上显示顺序

二.层叠上下文

层叠上下文 html中的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕）视窗或网页用户z轴上的延申，html元素依据自身的属性按优先顺序占用层叠上下文的空间.

三.项目案例

3.1 正常文档流之float浮动与inline-block内联块级元素层叠顺序的比较

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>层叠顺序与层叠上下文</title>
 6         <style>
 7             body, div {
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .container {
12                 position: relative;
13                 background: #ddd;
14                 margin-bottom: 10px;
15             }
16             .container > div {
17                 width: 250px;
18                 height: 250px;
19                 line-height: 250px;
20                 font-family: "微软雅黑";
21                 color: #333;
22                 text-align: center;
23                 font-size: 18px;
24                 font-weight: bold;
25                 border: 1px dashed #e6e6e6;
26                 /*opacity: .9;添加opacity触发-层叠上下文后添加的div带有display:inline-block属性的元素的div会叠加先添加div之上*/
27             }
28             .float {
29                 float: left;
30                 background-color: deeppink;
31             }
32             .inline-block {
33                 display: inline-block;
34                 background-color:yellowgreen;
35                 margin-left: -100px;
36             }
37         </style>
38     </head>
39     <body>
40         <div class="container">
41             <div class="inline-block">#divA display:inline-block</div>
42             <div class="float">#divB float:left</div>
43         </div>
44         <div class="container">
45             <div class="float">#divB float:left</div>
46             <div class="inline-block">#divA display:inline-block</div>
47         </div>
48     </body>
49 </html>

View Code