position有五种取值
-
static:无特殊定位,小透明,都快忘了它了
- 即是正常的文档流,不设置position默认就是它。
-
relative:相对定位的父亲
- 如果仅仅是
position:relative
,它的表现同static一样。 - 需要加top,bottom,left,right使其偏离正常位置。
- 注意:relative不会使元素脱离文档流。即是说,其他元素不会因为它(relative的元素)的改变而改变。
- 如果仅仅是
-
fixed:下拉滚动条,它还在那里
- 相对于浏览器可视窗口来定位,如我们要让上方导航栏不论风吹雨打(上下滚动)一直显示,就要给它设置
position:fixed
- 相对于浏览器可视窗口来定位,如我们要让上方导航栏不论风吹雨打(上下滚动)一直显示,就要给它设置
fixed会使元素脱离文档流。
absolute:绝对定位,我想在哪里在哪里
如果有relative,则绝对定位以relative的元素为爸爸,否则按照body定位。
脱离文档流,原来的空间会被下面的文档流元素占掉!!
inherit:其实就是继承父级元素的position属性。