1. <p>当需要一个元素不以文档流规则定位的时候，应该使用position这个属性</p>
  2. <ul>
  3.     <li>static是position的默认属性值</li>
  4.     <li>relative是相对自身定位</li>
  5.     <li>absolute是相对第一个position的非static的祖先定位</li>
  6.     <li>fixed是相对浏览器窗口定位</li>
  7.     <li>stick粘性定位</li>
  8. </ul>
  9. <p>要实现定位，除了设置定位参照元素之外，还需要top,right,bottom,left来具体描述定位</p>

relative - 相对自身

  1. <style>
  2.     .d2{
  3.       position: relative;
  4.       top: 10px;
  5.       left: 20px;
  6.       height: 50px;
  7.       width: 50px;
  8.       border: 1px solid black;
  9.     }
  10. </style>
  12. <body>
  13.     <p>当需要一个元素不以文档流规则定位的时候，应该使用position这个属性</p>
  14.     <ul>
  15.         <li>static是position的默认属性值</li>
  16.         <li>relative是相对自身定位</li>
  17.         <li>absolute是相对第一个position的非static的祖先定位</li>
  18.         <li>fixed是相对浏览器窗口定位</li>
  19.         <li>stick粘性定位</li>
  20.     </ul>
  21.     <p>要实现定位，除了设置定位参照元素之外，还需要top,right,bottom,left来具体描述定位</p>
  22.     <div id="parent">
  23.         <div class="d1">
  24.             <div class="d2">如果一个元素使用relative定位，相对自身原来的位置定位，对文档流没有影响</div>
  25.             <div class="d3">d3</div>
  26.         </div>
  27.         <button>按钮1</button>
  28.         <button>按钮2</button>
  29.     </div>
  30. </body>

absolute - 相对父元素

  1. <style>
  2.         .d1{
  3.             position: relative;
  4.             height: 300px;
  5.             width: 300px;
  6.             border: black 1px solid;
  7.         }
  9.         .d2{
  10.             position: relative;
  11.             height: 100px;
  12.             width: 100px;
  13.             border: red 1px solid;
  14.         }
  16.         .d3{
  17.             position: absolute;
  18.             right: 0;
  19.             bottom: 0;
  20.             height: 50px;
  21.             width: 50px;
  22.             border: green 1px solid;
  23.         }
  25.     </style>
  26. <body>
  27.     <p>如果一个元素如果需要相对他的非static的祖先元素定位，设置position为absolute</p>
  28.     <div class="d1">
  29.         <div class="d2">
  30.             <div class="d3"></div>
  31.         </div>
  32.     </div>
  33. </body>

fixed - 相对窗口

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>fixed</title>
  7.     <style>
  8.         /* 块级元素的position如果为absolute或是fixed的时候，默认宽为0 */
  9.         .d1{
  10.             position:fixed;
  11.         }
  12.         .s1{
  13.             position: absolute;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="d1"></div>
  19.     <span class="s1"></span>
  20. </body>
  21. </html>

z-index - 层级

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .d1{
  9.             position: absolute;
  10.             z-index: 6;
  11.             opacity: .5;  /*透明度*/
  12.             width: 300px;
  13.             height: 300px;
  14.             background-color: pink;
  15.         }
  17.         .d2{
  18.             position: absolute;
  19.             z-index: 3;
  20.             width: 200px;
  21.             height: 200px;
  22.             background-color: salmon;
  23.         }
  24.         .d3{
  25.             position: absolute;
  26.             z-index: 6;
  27.             width: 100px;
  28.             height: 100px;
  29.             background-color: brown;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <p>如果一个元素脱离了文档，那么他和其他文档流元素就不在一个平面上</p>
  35.     <div class="d1"></div>
  36.     <div class="d2"></div>
  37.     <div class="d3"></div>
  38. </body>
  39. </html>