可以参考这位大神文章:
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>
这样就把整个父元素覆盖起来了。