HTML5之position定位

position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，绝对定位或固定定位元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position一般分为三种：绝对定位absolute，固定定位fixed，相对定位relative、静态定位static（默认）

1、position：relative 相对定位

采用相对定位的对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。
特点：
1）不影响元素本身的特性；
2）不使元素脱离文档流（元素移动之后原始位置会被保留）；
3）如果没有定位偏移量，对元素本身没有任何影响；

2、position：absolute 绝对定位

将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过 z-index属性定义。使用了绝对定位的元素对象不具有边距，但仍有补白和边框。

特点：
1）使元素完全脱离文档流；
2）使内嵌支持宽高；
3）块属性标签内容撑开宽度；
4）如果父级元素有定位（即父元素有设置position属性），则相对于父级发生偏移，否则相对于body发生偏移；
5）相对定位一般都是配合绝对定位元素使用；

3、position：fixed 固定定位

与绝对定位的特性基本一致，唯一的差别是始终相对整个文档进行定位。fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。与background-attachment:fixed相似。

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/89363425