无涯教程-CSS - 图层(Layers) CSS layers指的是将 z-index 属性应用于彼此重叠的元素。

CSS layers指的是将 z-index 属性应用于彼此重叠的元素。

z-index属性与 position 属性一起使用以创建图层效果。您可以指定哪个元素应该放在顶部，哪个元素应该放在底部。

<html>
   <head>
   </head>
<body>
<div style="background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">yellow</span><span class="pun">;</span><span class="pln"> 
     width</span><span class="pun">:</span><span class="lit">300px</span><span class="pun">;</span><span class="pln"> 
     height</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> 
     position</span><span class="pun">:</span><span class="pln">relative</span><span class="pun">;</span><span class="pln"> 
     top</span><span class="pun">:-</span><span class="lit">60px</span><span class="pun">;</span><span class="pln"> 
     left</span><span class="pun">:</span><span class="lit">35px</span><span class="pun">;</span><span class="pln"> 
     z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="lit">1</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">green</span><span class="pun">;</span><span class="pln"> 
     width</span><span class="pun">:</span><span class="lit">300px</span><span class="pun">;</span><span class="pln"> 
     height</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> 
     position</span><span class="pun">:</span><span class="pln">relative</span><span class="pun">;</span><span class="pln"> 
     top</span><span class="pun">:-</span><span class="lit">220px</span><span class="pun">;</span><span class="pln"> 
     left</span><span class="pun">:</span><span class="lit">120px</span><span class="pun">;</span><span class="pln"> 
     z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="lit">3</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">

</body>
</html>

它将产生以下输出-

无涯教程-CSS - 图层(Layers)

参考链接