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相似。