CSS 定位之 position 全面了解

什么是 position

在 CSS 中，position 属性用来控制一个元素在文档中的定位方式。常见的 position 属性值有 static、relative、absolute、fixed 和 sticky。

position 属性值

static

static 是 position 属性的默认值。它表示元素是静态定位的，元素会按照文档流正常显示。不管什么位置属性应用于元素，它总是保持原来的位置。

relative

relative 表示相对定位。元素相对于自己本来的位置进行移动。left、top、right 和 bottom 属性可以与 relative 配合使用，用来指定元素在 X 和 Y 轴上的移动距离。

示例：

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

上面的代码将一个 div 元素向右移动 20px，向下移动 10px。

absolute

absolute 表示绝对定位。元素的位置相对于它的最近的非 static 父元素进行定位。如果不存在非 static 父元素，则元素的位置会相对于文档的 body 元素进行定位。

left、top、right 和 bottom 属性可以与 absolute 配合使用，用来指定元素在 X 和 Y 轴上的移动距离。如果不指定这些属性，则元素会从它的原始位置偏移。

示例：

div {
  position: relative;
}

img {
  position: absolute;
  top: 20px;
  left: 20px;
}

上面的代码在一个相对定位的 div 元素中绝对定位了一个 img 元素，并向下偏移 20px，向右偏移 20px。

fixed

fixed 表示固定定位。元素的位置是相对于浏览器窗口的位置进行定位的，不会随滚动条的滚动而改变。

left、top、right 和 bottom 属性可以与 fixed 配合使用，用来指定元素在 X 和 Y 轴上的移动距离。

示例：

div {
  position: fixed;
  top: 20px;
  left: 20px;
}

上面的代码将一个 div 元素固定在浏览器窗口的左上角，离浏览器窗口顶部 20px，离左侧 20px。

sticky

sticky 表示粘滞定位，它是定位的一种变种，元素在滚动到指定的位置时会停止滚动，不会像 fixed 一样一直固定在某个位置。

left、top、right 和 bottom 属性可以与 sticky 配合使用，用来指定元素在 X 和 Y 轴上的移动距离。

示例：

div {
  position: sticky;
  top: 10px;
}

上面的代码将一个 div 元素置为顶部粘滞效果，元素会像 static 或 relative 定位一样开始，直到滚动到距离顶部 10px 的位置时停止，并相对于父元素达到粘滞效果。

总结

了解 position 属性的不同取值以及与其他属性（如 left、top、right 和 bottom）的配合使用，可以在布局时更好的控制元素的位置和显示效果。