position的常用属性

写在前面

为了制作更多复杂的布局，我们经常要用到 position 属性。属性值非常多，初学者容易混乱。让我们先一个个的过一遍，了解到如何正确舒服地使用。

static

.static {
  position: static;
}

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

absolute

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。“positioned”元素是指 position 值不是 static 的元素。

这里有一个简单的例子：

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

fixed

固定定位（position属性的值为fixed）元素是相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变。这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}

总结

Position也算是比较难搞了，多看多写才能掌握，掌握position是优秀布局的基础！