CSS中灵活使用:before和:after

          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/  

      }   

      .test-div{   

          position:fixed;   

          left:50px;   

          top:50px  

      }   

  </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;   

         top:80px;   

         width:50px;   

         height: 50px;   

         background: white;   

         z-index: 2   

     }   

 </style>   

 <div class="first-div"></div>   

 <div class="second-div"></div>   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!