1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>定位与定位元素</title>
  8. </head>
  9. <body>
  10.     <!-- 文档流：显示顺序和书写顺序一致 -->
  11.     <!-- 文档流默认position:static -->
  12.     <div class="box parent">
  13.         <div class="box child first"></div>
  14.         <div class="box child"></div>
  15.     </div>
  17. </body>
  18. </html>
  20. <style>
  21.     body{
  22.         border: 1px solid #000;
  23.     }
  25.     .box {
  26.         border: 1px solid #000;
  27.     }
  29.     .box.parent{
  30.         width: 300px;
  31.         height: 400px;
  32.         background-color: lightcyan;
  33.     }
  35.     .box.child{
  36.         width:150px;
  37.         height: 150px;
  38.         background-color: yellow;
  39.     }
  41.     .box.child.first{
  42.         width:150px;
  43.         height: 150px;
  44.         background-color: lightgreen;
  46.           /* 1 相对定位 */
  47.         position:relative; 
  48.         /* 相对于自身在文档流中的位置，元素仍然在文档流中国，原占空间不释放，
  49.         只有相对原位置进行了偏移 */
  50.         top:30px;
  51.         left:30px;
  53.         /* 2 绝对定位 */
  54.         /* 相对于他的包含快，看他的元素结构了 
  55.         能充当绝对定位包含快的元素，必须是定位元素
  56.         不能是static就可以了
  57.         如果绝对定位元素向上一直找不到可定位的父级，那就相对于Body/html*/
  58.         position:absolute;
  60.     }
  62.     .box.parent{
  63.         /* 设定定位参考父级，包含快 */
  64.         position: relative;
  65.     }
  67.     /* 相对定位：相对自身，在文档流中
  68.     绝对定位：相对包含快，不在文档流中 */
  70.     /* 3 固定定位 */
  71.     /* 永远不动了，是绝对定位的一个子集，就是绝对定位
  72.     ，只是包含快是固定，永远是Body/html
  73.      */
  74.     .box.child.first{
  75.         position: fixed;
  76.     }
  78. </style>