CSS定位属性Position详解

CSS定位属性Position详解

 

1. position:static 

相对定位元素会相对于它在正常流中的默认位置偏移。

即所有元素的默认定位都是：position:static，这意味着元素没有被定位,元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。

 

2. postion:absolute 

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. 并脱离文档流（即脱离原来的位置，不会影响其他原来的同级元素；相当于父元素内元素位置，但此元素却存在）。

注意：如父div 是static 定位，则元素的位置可通过 "left", "top", "right" 以及 "bottom" ; "margin"; "padding"属性进行规定，但仍脱离文档流。不同：设置top,left等属性则以body为基准；如设置margin,padding则以第一父元素为基准。

 

3. position:relative 

生成相对定位的元素，相对于其正常位置进行定位。可设置top, left, margin, padding 其中设置top,margin-top 效果一样。

 

4. position:fixed 

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。