CSS 中有五种常见的定位方式--详解

CSS 中有五种常见的定位方式，它们是：

1. 静态定位（Static）：元素的默认定位方式。在静态定位下，元素根据正常文档流进行布局，并不受到 top、left、bottom、right 等属性的影响。

HTML:

<div class="static-element">
  这是静态定位的元素。
</div>

CSS:

.static-element {
  position: static;
}

 

2. 相对定位（Relative）：通过设置元素的位置属性（如 top、left、bottom、right）来相对于其在正常文档流中的位置进行定位。相对定位会保留元素在文档流中的空间，并可以通过偏移值来调整元素的位置。

HTML:

<div class="relative-container">
  <div class="relative-element">
    这是相对定位的元素。
  </div>
</div>

CSS:

.relative-container {
  position: relative;
}

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

3. 绝对定位（Absolute）：通过设置元素的位置属性（如 top、left、bottom、right）来相对于其最近的具有定位（position 属性为 relative、absolute、fixed 或 sticky）的祖先元素进行定位。绝对定位会脱离文档流，并且不会在布局中占用空间。

HTML:

<div class="absolute-container">
  <div class="absolute-element">
    这是绝对定位的元素。
  </div>
</div>

CSS:

.absolute-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.absolute-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 固定定位（Fixed）：与绝对定位类似，但相对于浏览器窗口或包含框的位置进行定位，而不是相对于父级元素。固定定位的元素在滚动页面时会保持在视图的固定位置。

HTML:

<div class="fixed-element">
  这是固定定位的元素。
</div>

CSS:

.fixed-element {
  position: fixed;
  top: 0;
  right: 0;
}

5. 粘性定位（Sticky）：粘性定位结合了相对定位和固定定位的特性。元素根据正常文档流进行布局，但当滚动到预定的阈值位置时会变为固定定位，保持在视图中的特定位置。

HTML:

<div class="sticky-element">
  这是粘性定位的元素。
</div>

CSS:

.sticky-element {
  position: sticky;
  top: 20px;
}

这些定位方式可以通过 CSS 的 `position` 属性来设置，并配合使用 `top`、`left`、`bottom`、`right` 等属性调整元素的位置。