子绝父相的原理

1.子绝父相的解释

子级是绝对定位，父级要用相对定位。

2.特点

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局时，需要占有位置，因此父亲只能是相对定位。这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

3.举例说明

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子绝父相</title>
  </head>
  <style>
    /* 子绝父相:
      子元素使用绝对定位,父元素使用相对定位.让子元素相对于父元素进行自由的移动位置
      好处:对网页布局影响比较小.
  */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .father {
      /* 1.若父元素设置为绝对定位的时候,会脱标,不占位置,底下的模块会自动上浮,页面紊乱 */
      /* position: absolute; */
      position: relative;
      /* 2.若父元素设置为相对定位,子元素会相对于父元素移动位置,对页面影响较小,推荐使用!!! */
      top: 50px;
      left: 50px;
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    .son {
      position: absolute;
      top: 0px;
      left: 200px;
      width: 100px;
      height: 100px;
      background-color: aqua;
    }
    .son1 {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
  <body>
    <div class="father">
      <div class="son"></div>
      <div class="son1"></div>
    </div>
  </body>
</html>

4.总结

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位，另外在实际网页布局设计时，如果你全部使用相对定位时，则会在页面中占位置（没有脱标），将其移动时，会使偏移量数值增大，可能会在布局四周留下大量空白，所以我们推荐使用子绝父相。

原文链接: https://blog.csdn.net/2302_78593467/article/details/135954834

1.子绝父相的解释

2.特点

3.举例说明

4.总结

目录