static:默认值,表示没有定位,块级元素和行内元素按照各自的特性进行显示
relative:相对定位,元素相对于原本位置的定位,元素不脱离文档流,位置会被保留,其他的元素位置不会受到影响,不会改变元素的display属性
absolute:绝对定位,相对于static以外的第一个父元素进行定位,如何不存在这样的包含块则相对于body进行定位。脱离文档流,并改变了display属性,元素本身生成块级框(可以设置宽高,不设置宽度时宽高由内容撑开,不继承父级宽度,可以在一行显示,换行符不解析)
fixed:固定定位,相对于浏览器窗口进行定位。脱离文档流,并改变了display属性,元素本身生成块级框。
sticky:粘性定位,它结合了结合了position:relative 和 position:fixed 两种定位功能于一体的特殊定位
1)须指定 top, right, bottom, left 四个阈值其中之一,才可使粘性定位生效,否则其行为与相对定位相同。
2)并且 top 和 bottom 同时设置时,top 生效的优先级高,left 和 right 同时设置时,left 的优先级高。
3)设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible,否则 position:sticky 不会生效。
- 如果 position:sticky 元素的任意父节点定位设置overflow:hiddn,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况。
- 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed,则元素相对父元素进行定位,而不会相对 viewprot 定位。
通常还有:全局值
inherit:继承,从父元素继承 position 属性的值。IE8以及以前的版本都不支持inherit属性。
initial:用于设置css属性为它的默认值,可用于任何css样式
unset:他是关键字initial和inherit的组合
当我们给一个css属性设置unset的话:
如果该属性默认继承,该值等同于inherit
如果该属性是非继承属性,该值等同于initial