CSS四种定位方式

一、静态定位（Static Positioning）

定义

静态定位是所有元素的默认定位方式。当元素未设置任何定位属性时，默认采用静态定位。

特点

• 布局行为：元素按照正常的文档流（正常流）排列，不会因为定位属性的设置而改变其位置。
• 位置属性：top、right、bottom、left属性不起作用。
• 原位置保留：由于元素未脱离文档流，其原本的位置被保留，页面布局保持稳定。

示例

<style>
  .static-box {
    width: 100px;
    height: 100px;
    background-color: lightgray;
    /* 默认是 static，无需显式设置 */
  }
</style>
<div class="static-box">静态定位</div>

二、相对定位（Relative Positioning）

定义

相对定位允许元素相对于其正常位置进行偏移，但仍然保留其在文档流中的原始空间。

特点

• 布局行为：元素仍占据其原始空间，且其他元素的布局不受影响。
• 位置属性：可以使用top、right、bottom、left来偏移元素的位置。
• 原位置保留：由于元素仍保留在文档流中，其原本的位置被保留，且元素的偏移不会影响其他元素。

示例

<style>
  .relative-box {
    position: relative;
    top: 20px; /* 向下偏移20px */
    left: 30px; /* 向右偏移30px */
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
</style>
<div class="relative-box">相对定位</div>

效果图

在上述示例中，.relative-box元素会从其正常位置向下偏移20px，向右偏移30px，但其原本的位置仍被保留，其他元素不会因其偏移而重新排列。

三、绝对定位（Absolute Positioning）

定义

绝对定位使元素脱离正常的文档流，相对于最近的**已定位**的祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。

特点

• 布局行为：元素脱离文档流，不占据原来的空间，其他元素会填补其原本的位置。
• 位置属性：可以使用top、right、bottom、left来精确定位元素。
• 原位置不保留：由于元素脱离文档流，其原本的位置不再被保留，可能会导致布局变化。

示例

<style>
  .relative-parent {
    position: relative; /* 为子元素提供定位参考 */
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
  }
  .absolute-box {
    position: absolute;
    top: 50px; /* 相对于父元素顶部偏移50px */
    left: 100px; /* 相对于父元素左侧偏移100px */
    width: 100px;
    height: 100px;
    background-color: lightcoral;
  }
</style>
<div class="relative-parent">
  <div class="absolute-box">绝对定位</div>
</div>

效果图

在上述示例中，.absolute-box元素相对于其最近的已定位祖先元素.relative-parent进行定位，偏移50px自顶部和100px自左侧。由于绝对定位，.absolute-box脱离了文档流，其原本在.relative-parent中的位置不再被占用。

四、固定定位（Fixed Positioning）

定义

固定定位使元素相对于浏览器窗口进行定位，无论页面如何滚动，元素始终保持在指定的位置。

特点

• 布局行为：元素脱离文档流，不占据原来的空间，其他元素会填补其原本的位置。
• 位置属性：可以使用top、right、bottom、left来精确定位元素。
• 原位置不保留：由于元素脱离文档流，其原本的位置不再被保留，且元素的位置不受页面滚动影响。

示例

<style>
.fixed-box {
  position: fixed;
  bottom: 20px; /* 相对于浏览器底部偏移20px */
  right: 20px; /* 相对于浏览器右侧偏移20px */
  width: 150px;
  height: 50px;
  background-color: lightgreen;
  text-align: center;
  line-height: 50px;
}
</style>
<div class="fixed-box">固定定位</div>
<!-- 增加内容以便滚动 -->
<div style="height: 2000px;"></div>

效果图

在上述示例中，.fixed-box元素固定在浏览器窗口的右下角，无论页面如何滚动，它始终保持在该位置。由于固定定位，元素脱离了文档流，其原本的位置不再被占用。

五、总结

• 静态定位（static）：默认定位方式，元素按照正常文档流排列，原位置被保留。
• 相对定位（relative）：元素相对于其正常位置进行偏移，原位置被保留，且偏移不会影响其他元素。
• 绝对定位（absolute）：元素脱离文档流，相对于最近的已定位祖先元素定位，原位置不保留，不影响其他元素布局。
• 固定定位（fixed）：元素脱离文档流，相对于浏览器窗口固定位置，原位置不保留，且位置不随页面滚动变化。

理解这四种定位方式及其对元素布局和文档流的影响，有助于开发者更灵活地控制网页布局，实现复杂的设计需求。