css3 子绝父相

CSS3 子绝父相是 CSS3 中一个比较实用的功能，它可以让子元素的定位不再与父元素的定位属性有关联，即使父元素的定位属性发生了改变，子元素的位置也不会受到影响。

为了达到这样的效果，我们需要使用 CSS3 中的 position 属性。通常情况下，子元素的定位会和其父元素有关联，如下所示：

   
  <div class="father">
    <div class="son">
    </div>
  </div>

  .father {
    position: relative;
  }

  .son {
    position: absolute;
    top: 0;
    left: 0;
  }
  

在上面的示例中，子元素 son 的定位与父元素 father 有关联，即使改变 father 元素的定位属性，son 元素的位置也会发生相应的变化。

而如果要使用 CSS3 子绝父相功能，则需要将子元素的定位属性设置为 fixed，这样子元素的定位就不再与父元素关联，如下所示：

   
  <div class="father">
    <div class="son">
    </div>
  </div>

  .father {
    position: relative;
  }

  .son {
    position: fixed;
    top: 0;
    left: 0;
  }
  

使用 CSS3 子绝父相功能可以方便地实现许多页面布局效果，例如在一个固定位置的父元素中动态地插入子元素，而子元素的定位不受父元素的影响。

总之，CSS3 子绝父相让我们在布局页面时更加灵活，提高了页面的可维护性和可扩展性。