position属性有哪些

一、static

默认值为static。这表示元素在文档流中正常地呈现，没有任何特殊表现。在下面的示例中，我们将创建两个元素，一个h1标题和一个div。它们都被设置为static定位。

h1 {
  position: static;
}

div {
  position: static;
}

二、relative

relative的元素被认为是在普通文档流中，但相对于其正常位置偏移。它不会真正地移动元素或影响其他元素的位置。在下面的示例中，我们将创建一个相对定位的div。

div {
  position: relative;
  left: 20px;
  top: 10px;
}

三、absolute

absolute的元素从文档流中删除，并相对于其包含块（通常为父元素）定位。如果没有找到包含块，则相对于body元素。绝对定位的元素不会占据文档流中的空间。在下面的示例中，我们将创建一个绝对定位的div元素。

div {
  position: absolute;
  top: 50px;
  right: 0;
}

四、fixed

fixed的元素相对于浏览器窗口固定，而不是相对于包含块。当滚动页面时，固定元素保持不变。在下面的示例中，我们将创建一个固定的div元素。

div {
  position: fixed;
  bottom: 0;
  left: 0;
}