关于CSS absolute与relative不得不说的话

下面是关于CSS absolute与relative的完整攻略：

下面是关于CSS absolute与relative的完整攻略：

什么是CSS absolute与relative？

CSS绝对定位和相对定位是一种基于元素父级（或祖先级）的定位方式，他们都是将元素从其正常的文档流中拖出来并定位在其所在元素（必须是已定位元素）的特定位置上。

其中，CSS相对定位是针对元素在正常文档流中的位置进行定位，而CSS绝对定位是基于页面的绝对位置进行定位。

CSS relative示例

<div style="position: relative; background-color: #f9c2ff; height: 300px;">
  <div style="position: relative; left: 50px; width: 50px; height: 50px; background-color: #bfdbff;">
    <p>这里是相对元素</p>
  </div>
</div>

在这个示例中，我们创建了一个外层div，它的高度为300px，同时设置了相对定位。内层div是一个相对定位的元素，它被设置了左侧偏移量为50px。这个偏移量是相对于父元素进行计算的，所以内层div会距离父元素左侧边界50px的位置放置。

CSS absolute示例

<div style="position: relative;">
  <div style="position: absolute; top: 30px; right: 50px; width: 50px; height: 50px; background-color: #bfdbff;">
    <p>这里是绝对元素</p>
  </div>
</div>

在这个示例中，我们创建了一个父元素div，它的位置设置为相对定位。内层div是一个绝对定位的元素，它被设置在父元素右上角的位置。这个位置是相对于父元素的绝对位置，所以即使父元素的位置改变了，内层div仍然可以保持在相同的位置上。

总结

在开发中，我们通常会将CSS绝对定位和相对定位与其他定位方式（如静态定位）结合使用，以达到更灵活的布局效果。希望本文对您有所帮助。