关于javascript: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 则能够革除浮动）。