CSS 布局 - position 属性
position 属性指定元素使用的定位方法类型（static、relative、fixed、absolute 或 sticky）。
position 属性
position 属性指定元素使用的定位方法类型。
有五种不同的 position 值
staticrelativefixedabsolutesticky
然后使用 top、bottom、left 和 right 属性来定位元素。但是，除非首先设置了 position 属性，否则这些属性将不起作用。它们根据 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 | 设置已定位框的顶部边距 |
