CSS中灵活使用:before和:after

      }   
  </style>   
  <div class="test-div">Hello World</div>   
<!–position:relative + position:absolute–>   
  <style>   
      .out-div{   
          width: 300px;   
          height: 300px;   
          background: purple;  /*这里定义个背景，让我们知道这个div在哪*/  
          margin:50px 0px 0px 50px;   
          position: relative  
      }   
      .in-div{   
          position:absolute;   
          left:50px;   
          top:50px  
      }   
  </style>   
  <div class="out-div">   
      <div class="in-div">Hello World</div>   
  </div>   
  

z-index 元素堆叠排序

z-index用于设置或检索对象的堆叠顺序，对应的脚本特性为zIndex。

z-index的数值越大，该元素的堆叠层级越高。

代码：

CSS Code复制内容到剪贴板

<style>   
     .first-div{   
         width: 300px;   
         height: 300px;   
         background: purple;  /*这里定义个背景，让我们知道这个div在哪*/  
         position: absolute;   
         left:50px;   
         top:50px;   
         z-index: 1   
     }   
     .second-div{   
         position:absolute;   
         left:80px;