CSS 位置

简介

CSS 位置指定元素在文档中的位置。通过设置定位属性，可以控制元素在文档流中的位置、大小和 z 轴顺序。

定位属性

position

用于定义元素定位的类型：

• static：元素遵循正常文档流的默认行为，忽略 top、 bottom、right、left 和 z-index 属性。
• relative：元素相对于其原始位置进行定位，可以通过 top、bottom、right、left 属性调整位置。
• absolute：元素相对于最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，则相对于 html 元素。
• fixed：元素相对于 viewport（浏览器窗口）进行定位，不会随滚动条滚动而移动。

top、bottom、right、left

用于定义元素相对于其包含块的位置，例如：

position: relative;
top: 10px;
left: 20px;

z-index

用于定义元素的层叠顺序，可以是正整数、负整数或 auto（默认值）。值越大的元素显示在越上面。

实例

居中对齐

要想让一个元素在屏幕上水平和垂直居中对齐，可以使用以下样式：

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

粘性页眉

要想实现一个随着滚动条滚动固定在顶部的页眉，可以使用以下样式：

position: fixed;
top: 0;
left: 0;
right: 0;

结论

通过掌握 CSS 位置的基本属性和技巧，可以更好地进行页面布局和设计。