关于position的定位

1.固定定位position：fixed;

相对于浏览器窗口来进行定位，设置left,top,bottom,right

2.相对定位position:relative;

相对于元素本身定位，一般不设置left,top,bottom,right，主要是配合绝对定位实现元素的稳定排版。

如果加入了left,top,bottom,right的话相对于元素开始的占位移动，由于相对定位没有脱离文档流，于是保留元素开始的占位。

注：文档流：html布局就是文档流模型的，即块级元素元素独占一行<div><p>等等，行内元素不独占一行<a><span>等等。整个html文件排版下来就是文档流模型。

3.绝对定位position:absolute;

绝对定位相对于已经相对定位的最近的祖先元素，一般为了保证稳定直接给父子元素分别相对定位绝对定位，再加上left,top,bottom,right即可。

<div style="position: relative;">
     <p style="position: absolute; left: 10px;top: 0;"></p>
　　　<a href="###"></a>
</div>

绝对定位是脱离文档流的，如上例中p元素不占位，如果有定位内容被覆盖通过z-index：xx设置优先级。

 

转载于:https://www.cnblogs.com/yuanyuan0809/p/5387278.html