css position属性设置元素在文档中的位置

CSS position属性

CSS position属性是用来控制元素在文档中的位置，它可以让元素以不同的方式定位，比如：静态定位、相对定位、绝对定位和固定定位。

静态定位

静态定位是默认的定位方式，元素会按照文档的顺序展示，不受position属性的影响。

position: static;

相对定位

相对定位可以让元素相对于它原来的位置进行移动，使用这种定位方式，可以使用top、right、bottom和left属性来控制元素的位置。

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

绝对定位

绝对定位可以让元素定位于文档中的指定位置，使用这种定位方式，可以使用top、right、bottom和left属性来控制元素的位置。

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

固定定位

固定定位可以让元素固定在文档中的指定位置，即使文档滚动，元素也会保持原来的位置不变。使用这种定位方式，可以使用top、right、bottom和left属性来控制元素的位置。

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

使用示例

下面是一个定位元素的示例：

  这是一个定位元素

上面的代码将会使得.box元素相对于文档的左上角偏移10px和20px，从而达到定位的效果。

在使用CSS position属性时，需要根据实际需求来选择不同的定位方式，比如：静态定位、相对定位、绝对定位和固定定位。