CSS 布局 - position 属性
position 属性指定用于元素的定位方法类型 (static、relative、fixed、absolute 或 sticky)。
position 属性
position 属性指定用于元素的定位方法类型。
有五种不同的位置值
staticrelativefixedabsolutesticky
然后使用 top、bottom、left 和 right 属性定位元素。但是，这些属性只有在先设置 position 属性后才能使用。它们的工作方式也取决于位置值。
position: static;
HTML 元素默认情况下以 static 方式定位。
static 定位的元素不受 top、bottom、left 和 right 属性的影响。
具有 position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流程进行定位
以下是使用的 CSS
position: relative;
具有 position: relative; 的元素相对于其正常位置定位。
设置相对定位元素的 top、right、bottom 和 left 属性会导致它从其正常位置调整。其他内容不会调整以适应元素留下的任何空白。
以下是使用的 CSS
position: fixed;
具有 position: fixed; 的元素相对于视窗定位，这意味着即使页面滚动，它也始终保持在同一位置。top、right、bottom 和 left 属性用于定位元素。
固定元素不会在页面上留下它原本应该位于的空白。
请注意页面右下角的固定元素。以下是使用的 CSS
示例
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
亲自尝试 »
position: fixed;position: absolute;
具有 position: absolute; 的元素相对于最近的已定位祖先元素进行定位 (而不是相对于视窗定位，如 fixed)。
但是；如果绝对定位元素没有已定位祖先元素，它会使用文档主体，并且会随着页面滚动移动。
注意：绝对定位的元素从正常流程中删除，并且可以与其他元素重叠。
以下是一个简单的示例
以下是使用的 CSS
示例
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
亲自尝试 »
position: sticky;
带有 position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素在 relative 和 fixed 之间切换，具体取决于滚动位置。它最初定位为相对位置，直到视窗中满足给定的偏移位置 - 然后它会“粘贴”在适当的位置（类似于 position:fixed）。
注意： 为了使粘性定位生效，您必须指定至少一个 top、right、bottom 或 left 属性。
在本例中，当您到达其滚动位置时，粘性元素会粘贴到页面顶部 (top: 0)。
示例
div.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
亲自尝试 »
在图像中定位文本
如何在图像上定位文本
更多示例
设置元素的形状
此示例演示如何设置元素的形状。元素被裁剪成此形状，并显示出来。
所有 CSS 定位属性
| 属性 | 描述 |
|---|---|
| bottom | 设置定位框的下边距边缘 |
| clip | 裁剪绝对定位元素 |
| left | 设置定位框的左边距边缘 |
| position | 指定元素的定位类型 |
| right | 设置定位框的右边距边缘 |
| top | 设置定位框的上边距边缘 |
