详见:https://www.cnblogs.com/theWayToAce/p/5264436.html
先看下各个属性值的定义:
1、static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
2、relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。
3、absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed(固定定位):生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析:
定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。
定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不再存在。同时,正常流中的内联元素不知道页面有absolute元素,也就是说,正常流中的内联元素不会绕开这个绝对元素。
具有float浮动属性的元素与absolute元素不同,正常流中的内联元素会绕开浮动元素。