- position含义是指定位类型, 可取值有:
static
,relative
,absolute
,fixed
,inherit
,sticky
(另: sticky是除css3新发布的属性)
1. position: static;
static(没定位)是position的默认值, 元素处于正常的文档流中, 会忽略left, top, right, bottom, z-index属性.
2. position: relative;
relative(相对定位)是给元素设置相对原本位置的定位, 不脱离文档流, 此元素原本位置会保留, 其他元素不会受影响.
3. position: absolute;
absolute(绝对定位)指给元素设置绝对定位,相对定位的对象可以分为两种情况:
- 设置了
absolute
的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。 - 如果并没有设置了
position
属性的祖先元素,则此时相对于body进行定位。
4. position: fixed;
可以简单说fixed是特殊版的absolute,fixed元素总是相对于body定位的。
5. inherit
继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。
6. sticky (黏性定位,吸顶效果)
设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。