CSS 的 position 属性

方周率2024-08-17 14:13

CSS 的 position 属性用于指定一个元素在文档中的定位方式。它有以下几个取值：

static （默认值）
- 元素按照正常的文档流进行定位，不受 top、right、bottom 和 left 属性的影响。
- 特点：不会被脱离文档流，其他元素会根据它的位置进行排布。
relative
- 元素相对于其正常位置进行偏移。使用 top、right、bottom 和 left 属性可以调整元素相对于其默认位置的偏移。
- 特点：元素仍然占据原来的空间，但可以相对于原始位置进行移动。
absolute
- 元素相对于最近的已定位（非 static）祖先元素进行定位。如果祖先元素中没有已定位的元素，则相对于初始包含块（通常是浏览器窗口）进行定位。
- 特点：元素脱离文档流，不再占据原来的空间，其他元素会按照正常的文档流重新排布。
fixed
- 元素相对于浏览器窗口（视口）进行定位，即使页面滚动，元素的位置也不会发生变化。
- 特点：元素脱离文档流，始终固定在浏览器窗口的某个位置。
sticky
- 元素在特定条件下表现为相对定位（relative），在滚动到一定位置后变为固定定位（fixed）。可以通过 top、right、bottom 和 left 属性来指定粘性位置。
- 特点：元素在滚动时会"粘"在某个位置，一旦滚动超出设定值，它就会固定在设定的边界处。

例子

css 复制代码

/* static: 默认值，不影响布局 */
.element-static {
    position: static;
}

/* relative: 相对原始位置进行偏移 */
.element-relative {
    position: relative;
    top: 10px;
    left: 20px;
}

/* absolute: 相对最近的已定位祖先元素定位 */
.element-absolute {
    position: absolute;
    top: 50px;
    left: 50px;
}

/* fixed: 固定在视口中，不受滚动影响 */
.element-fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

/* sticky: 在滚动达到 20px 后"粘"在顶部 */
.element-sticky {
    position: sticky;
    top: 20px;
}

使用不同的 position 值可以实现多种布局效果，根据需要选择合适的定位方式。