css position 设置元素的定位方式详解

CSS position 的定位方式详解

什么是 CSS position ？

CSS position 是用来设置元素定位方式的一个属性。当一个元素被设置了 position 属性之后，我们可以用 top、bottom、left 和 right 来确定它的位置。

一般来说，CSS position 有 4 种类型：

• static：静态定位，默认值。
• relative：相对定位。
• absolute：绝对定位。
• fixed：固定定位。

以下会对它们进行分别的详解。

1. 静态定位（static）

静态定位是元素的默认定位方式，也就是说，如果你不设置任何定位方式，那么元素就是静态定位的。

静态定位的元素不会受到 top、bottom、left 和 right 的影响，所以不需要调整。例如：

p {
  position: static;
}

2. 相对定位（relative）

相对定位会改变元素的位置，但是相对于它原来的位置发生偏移，而不是相对于整个文档。实现相对定位，需要设置 top、bottom、left 和 right 的值。例如：

div {
  position: relative;
  left: 20px;
  top: 10px;
}

在这个例子中，元素 div 的位置将会偏移 20 像素向右，10 像素向下。

3. 绝对定位（absolute）

绝对定位是相对于最近一个设置了定位（position 不等于 static）的祖先元素，如果没有则相对于文档。实现绝对定位，需要设置 top、bottom、left 和 right 的值。例如：

div {
  position: relative;
}

img {
  position: absolute;
  top: 50px;
  left: 120px;
}

在这个例子中，图片元素被设置为绝对定位，并且相对于 div 元素来定位，向下偏移 50 像素、向右偏移 120 像素。

4. 固定定位（fixed）

固定定位是相对于视图窗口的位置来定位元素。

固定定位的元素不受文档流的影响，不随页面滚动而滚动。实现固定定位，也需要设置 top、bottom、left 和 right 的值。例如：

div {
  position: fixed;
  top: 30px;
  right: 50px;
}

在这个例子中，元素 div 被设置为固定定位，距离视图窗口顶部 30 像素，距离视图窗口右侧 50 像素。

总结

这篇攻略详细地介绍了 CSS position 的 4 种定位方式，以及一些示例，你可以根据自己的需求选择相应的定位方式。