CSS 的 position 属性详解及其六个取值

2023-10-05 14:06:14

CSS 中的 position 属性定义元素在文档中的定位行为。它有六种取值，每一种取值都会对元素的布局产生不同的影响。本文将详细探讨 position 属性的六个取值以及它们之间的区别。

static 是 position 属性的默认值。它表明元素处于其正常位置，不会受其他元素的影响。static 元素不会脱离文档流，它占据其在文档流中应该占据的位置。

示例：

p {
  position: static;
  color: red;
}

效果： 段落文本将以红色显示，并且出现在文档流中它应该出现的位置。

relative 取值允许元素脱离文档流，但仍保留其原始位置。这意味着元素相对于其正常位置进行定位，并且可以在其周围添加偏移量。

示例：

p {
  position: relative;
  top: 20px;
  left: 50px;
  color: blue;
}

效果： 段落文本将以蓝色显示，并且相对于其正常位置向上移动 20px 并向左移动 50px。

absolute 取值使元素脱离文档流并相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于视口进行定位。absolute 元素不会占据文档流中的任何空间，因此其他元素可以流入其下方。

示例：

p {
  position: absolute;
  top: 0;
  left: 0;
  color: green;
}

效果： 段落文本将以绿色显示，并且定位在视口的左上角。

fixed 取值使元素脱离文档流并相对于视口进行定位。与 absolute 定位不同，fixed 元素始终保持在视口中的相同位置，即使页面滚动。

示例：

p {
  position: fixed;
  top: 0;
  right: 0;
  color: yellow;
}

效果： 段落文本将以黄色显示，并且固定在视口的右上角。

inherit 取值使元素从其父元素继承 position 属性值。如果父元素没有 position 属性，则元素将继承默认值 static。

示例：

#parent {
  position: relative;
}

p {
  position: inherit;
  color: purple;
}

效果： 段落文本将以紫色显示，并且相对于其父元素进行定位。

sticky 是 CSS3 中引入的一个新属性。它允许元素在页面滚动时保持其位置，直到它到达另一个定位元素。当它到达另一个定位元素时，它会粘贴到该元素上。

示例：

p {
  position: sticky;
  top: 0;
  color: orange;
}

效果： 段落文本将以橙色显示，并且在页面滚动时保持其位置，直到它到达视口的底部。然后，它将粘贴到视口的底部。

总结

CSS position 属性有六个取值：static、relative、absolute、fixed、inherit 和 sticky。每个取值都会对元素的布局产生不同的影响。

取值
static	元素处于其正常位置，不会受其他元素的影响。
relative	元素脱离文档流，但保留其原始位置。
absolute	元素脱离文档流并相对于其最近的已定位祖先元素或视口进行定位。
fixed	元素脱离文档流并相对于视口进行定位，始终保持在相同位置。
inherit	元素从其父元素继承 position 属性值。
sticky	元素在页面滚动时保持其位置，直到它到达另一个定位元素，然后粘贴到该元素上。