一、定义
相对于父元素或浏览器窗口或本身的位置偏移一段距离,此偏移是x、y、z轴上的偏移;且会为元素创建一个矩形框。
二、使用
- 格式:position:static | relative | absolute | fixed | inherit
1.static:元素正常生成,与没声明没区别。- 其元素各种特性不变,块级元素还是块级元素,行内元素还是设置不了上下margin。
- relative:相对于包含块(直接包含块),其包含块不用声明position属性;其只是脱离了包含块的文档流。
- 其元素各种特性不变,块级元素还是块级元素,行内元素还是设置不了上下margin。
3.absolute:完全脱离文档流;其相对于有声明position属性的包含块,若果其包含块都没有声明position属性,其将相对于初始包含块(有的浏览器是HTML元素,有的是body,有的是视窗口)进行偏移。 - 块级元素会失去其特性--占据一行的特性;其行内元素(包括position:static | relative | absolute | fixed)、块级元素(包括position:static | relative)不会识别,但声明了position:absolute | fixed的块级元素,也不会识别,但其content会进行识别。
- 行内元素可以设置上下margin;行内元素(包括position:static | relative | absolute | fixed)、块级元素(包括position:static | relative | absolute | fixed)不会进行识别,但文本元素会进行识别。
4.fixed:完全脱离文档流,其是相对于视窗本身。 - 同理absolute属性值。
5.具有position:static | relative的元素 、正常的元素的外边距会进行合并;具有position:absolute | fixed的元素,不存在外边距合并的情况。
使用场景
适合大的布局。