position:absolute的深入学习

可以参考这位大神文章：
http://www.jianshu.com/p/a3da5e27d22b
设定position:absolute,元素从文档流完全删除，而position:relative会仍然作为文档流的一部分，它原本所占的空间仍然保留。
1.包裹性
一旦给元素加上absolute或float就相当于给元素加上了display:block;内联元素span默认宽度是自适应的，你给其加上width是不起作用的。要想width定宽，你需要将span设成display:block。但如果你给span加上absolute或float，那span的display属性自动就变成block，就可以指定width了。

<div style="border:4px solid red; position: absolute;">
  <img src="img/25/2.jpg" />
</div>

div是块状元素，不指定width的话，默认是100%，但是设定position为absolute，就会包裹内部元素。
2.
用户只给元素指定了absolute，未指定left/top/right/bottom。此时absolute元素的左上角定位点位置就是该元素正常文档流里的位置。通过对left/top/right/bottom的组合设置，由于没有position:static以外的父元素，此时absolute元素可以去任意它想去的地方。
3.
父元素是relative，则absolute的子元素就会相对父元素定位，而不是正常文档流的位置，

.tipIcon {
  background-color: #f00;
  color: #fff;
  border-radius:50%;
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  right:-10px; 
  top:-10px;
    }
<div style="display: inline-block;position:relative;border:1px solid #000;">
  <img src="./01.jpg" />
  <span class="tipIcon">1</span>
</div>

子absolute元素不指定top等，就会在原文档流位置，而且父元素会认为其不存在；absolute指定top等均是以父元素为基准的。
实现右上角数字图标除了使用relative以及absolute以为，可以只用absolute，来具有更好的自适应性，参考开头大神文章。
4.
利用postion:absolute实现全屏覆盖：

.cover {
    position: absolute;
    left: 0;right: 0;top: 0;bottom: 0;
    background-color: #fff;
    opacity: 0.5;
}

<div style="display: inline-block;">
  <img src="1.jpg"/>
</div>
//全屏覆盖透明滤镜
<span class="cover"></span>

用absolute的left: 0;right: 0;top: 0;bottom: 0;来实现全屏拉伸，对于absolute元素来说，如果同时设置left和right会水平拉伸，同时设置top和bottom会垂直拉伸。
如果这样写就是部分区域全覆盖：

.tipIcon {
      background-color: #fff;
      opacity: 0.5;
      position: absolute;
      top:0px;
      left:0px;
      right:0px;
      bottom: 0px;
    }
<div style="display: inline-block;position:relative;border:1px solid #000;">
  <img src="./01.jpg" />
  <span class="tipIcon"></span>
</div>

这样就把整个父元素覆盖起来了。