什么是position？

在CSS中，position是一个非常重要的概念，它用于控制元素在页面中的位置。通过设置position属性，我们可以让元素相对于文档流中的某个位置进行定位，或者让元素脱离文档流，相对于视口或某个父元素进行定位。position属性有四个取值：static、relative、absolute和fixed。

static定位

static是position属性的默认值，表示元素按照文档流的顺序进行布局。如果没有设置其他的position属性值，那么元素就是static定位的。

relative定位

relative定位是相对于元素自身的位置进行定位。设置relative定位后，元素会脱离文档流，但是它的位置仍然占据文档流中的位置，其他元素不会受到影响。relative定位可以通过top、bottom、left和right属性来控制元素的位置。

absolute定位

absolute定位是相对于最近的非static定位的祖先元素进行定位。如果没有找到非static定位的祖先元素，那么元素就相对于文档的body元素进行定位。absolute定位同样可以通过top、bottom、left和right属性来控制元素的位置。

fixed定位

fixed定位是相对于视口进行定位，它不会随着页面的滚动而滚动。fixed定位同样可以通过top、bottom、left和right属性来控制元素的位置。

如何使用position？

要使用position属性，首先需要选择要定位的元素。可以通过CSS选择器来选择元素，例如选择id为"box"的元素：

```

box {

position: relative;

top: 50px;

left: 100px;

}

```

上面的代码将id为"box"的元素设置为relative定位，并且将它向下移动50像素，向右移动100像素。如果要使用absolute或fixed定位，可以将position属性的值设置为"absolute"或"fixed"，然后使用top、bottom、left和right属性来控制元素的位置。

总结

position是CSS中一个非常重要的概念，它可以用于控制元素在页面中的位置。通过设置position属性，我们可以让元素相对于文档流中的某个位置进行定位，或者让元素脱离文档流，相对于视口或某个父元素进行定位。position属性有四个取值：static、relative、absolute和fixed。要使用position属性，需要选择要定位的元素，然后设置position属性的值，并使用top、bottom、left和right属性来控制元素的位置。