前言

position是最常用的属性之一,所以务必将它的每个值都搞明白。本文是个人理解position的总结。

可能的值

  • static(default)
  • 静态的,默认的位置
  • 忽略left、right、top、bottom
  • relative
  • 相对的位置,相对默认(static)位置偏移
  • 仍然占据原来的位置,也可以说占据着文档流
  • 举例
  • 注意后边的div并没有上移占据空出来的空间,这是因为relative的div仍然占据原来的空间
  • absolute
  • 相对第一个非static的父元素的便宜,如果无此元素则相对body
  • 不再占据原先的位置,也就是脱离文档流
  • 举例
  • 注意后边的div上移占据了空出来的空间,这是因为absolute的div脱离文档流,不再占据原来的空间
  • fixed
  • 相对窗口
  • 脱离文档流,不再占据原先的位置
  • 举例

完整demo

在线demo