css之position

前言

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

可能的值

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

完整demo

在线demo