定位

static
默认值，表示没有开启定位。
relative
相对定位。如果开启了相对定位，但是没有设置偏移量，则它不会产生任何变化；如果设置了偏移量，则该元素会相对它原来的位置移动，类似 margin。相对定位的元素不会脱离文档流（即它原来的位置还在，不会随着定位而消失），也不会改变元素的性质（即行元素不会变成块元素）。相对定位会使元素提升一个层级（类似 z-index）。
absolute
绝对定位。会使元素脱离文档流，它会相对于离它最近的且开启了定位的祖先元素来进行定位。绝对定位会使元素提升一个层级（类似 z-index）。
fixed
固定定位。它也是一种绝对定位，因此，它拥有决定定位的大部分特点。但是，它永远会相对浏览器窗口来定位，且它不会随着滚动条的滚动而消失。IE6 不支持固定定位。

sticky

粘性定位。类似于相对定位。可以理解为，当元素到大某个位置时，将其固定（类似用 JS 实现的效果）。IE 不支持该特性。

<body>
  <div class="d1"></div>
</body>

body {
  margin: 0;
  padding: 0;
  height: 1000px;
}
.d1 {
  width: 200px;
  height: 200px;
  background: #ff6600;
  position: sticky;
  /* 当 div 距离页面顶部的距离为 10px 时，将其固定 */
  top: 10px;
  margin: 200px auto 0;
}

注意

元素开启定位之后，如果没有设置偏移量，则还是在原来的位置，只不过某些定位会脱离文档流。
请结合上面的笔记查看，元素脱离文档流后的性质。
元素开启定位之后，层级会提升，且兄弟节点之间会从后往前依次覆盖（如果有定位的话）。

提示

更多信息请见 w3cschoolopen in new window。

# 定位

定位