前言
position是最常用的属性之一,所以务必将它的每个值都搞明白。本文是个人理解position的总结。
可能的值
- static(default)
- 静态的,默认的位置
- 忽略left、right、top、bottom
- relative
- 相对的位置,相对默认(static)位置偏移
- 仍然占据原来的位置,也可以说占据着文档流
- 举例
- 注意后边的div并没有上移占据空出来的空间,这是因为relative的div仍然占据原来的空间
- absolute
- 相对第一个非static的父元素的便宜,如果无此元素则相对body
- 不再占据原先的位置,也就是脱离文档流
- 举例
- 注意后边的div上移占据了空出来的空间,这是因为absolute的div脱离文档流,不再占据原来的空间
- fixed
- 相对窗口
- 脱离文档流,不再占据原先的位置
- 举例
完整demo