相对定位、绝对定位和固定定位

目录

相对定位 position:relative

 绝对定位 position:absolute

固定定位 position:fixed

---

相对定位 position:relative

相对定位就是相对于自己以前在标准流中的位置来移动。

特点：不脱离文档流，保留原先的位置，相对于原先位置进行定位。

 

 绝对定位 position:absolute

绝对定位就是相对于body来定位。

绝对定位在这里分两种情况：

(1)父元素没有或者没设置相对定位，相对于浏览器视口区域进行定位。

(2)父元素设置了相对定位，相对于父元素/祖先元素进行定位。

 

特点:

1.脱离文档流，原先位置不保留，飘在文档流上方。

2.无论有没有父元素/祖先元素，相对于浏览器视口区域进行定位。

3.如果父元素/祖先设置定位属性，相对于父元素/祖先元素进行定位。

固定定位 position:fixed

固定定位可以让某个盒子不随着滚动条的滚动而滚动。

特性:脱离文档流