Position Relative 和Absolute Float使用注意点

好记性不如烂笔头，以前做的笔记，时间长了，每次都得翻看笔记本才能找到相关信息，今天就把笔记挨着记录到文章里面去。

• relative:相对定位，相对定位将元素偏离元素默认的位置，但是普通流中依旧保持着原有的默认位置，并没有脱离普通流，只是在视觉上发生了偏移。没有改变行内元素的display属性 <span>设置width无效
• absolute：绝对定位，应用了position：absolute的元素会循着节点树种的父（祖）元素来确认“根”，然后相对这个“根”元素来偏移，如果根元素中都没有设置position：relative或者fixed，那就相对body进行偏移。

块元素
在position：relative/static)的情况下width为100%
在position：absolute之后，会将width变成auto（会受到父元素宽度的影响）
行内元素
在position：absolute之后width，height有效，并不需要将display改变block

如果该元素也要使用float的话，应该注意如下几点：
与position兼容问题

1. 元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。
2. 元素同时应用了position: absolute及float属性，则float失效。
3. 第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）
   注：如果你不将float的元素的position设置成relative的话，你想通过设置float元素的z-index来的达到覆盖position:absolute是无效的。同理，float元素下面存在position: absolute的子元素，如果你不将float的元素的position设置成relative的话，absolute元素是不会定位到float元素的。
4. 同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。

csdn 关于Position、Float属性的一些深入探讨https://blog.csdn.net/u010340...