学习了绝对定位以后,对此进行一个总结,啦啦啦啦~
绝对定位特性
1、破坏性
破坏了原有的位置,从文档流里脱离出来
2、包裹性
如果下面这种情况,父级元素将不会有高度和宽度,失去原有的大小
父级
<div> <div style="width: 100px;height: 100px;position: absolute;background:red;"></div> </div>
3、去浮动
设置绝对定位以后,浮动的元素将会失效,来看下面的效果
1 b { 2 display: inline-block; 3 float: right; 4 width: 18px; 5 height: 30px; 6 background: url(../images/icon.png) no-repeat; 7 background-position: -154px -42px; 8 }
效果:
加上position:absolute以后
1 b { 2 position: absolute; 3 display: inline-block; 4 float: right; 5 width: 18px; 6 height: 30px; 7 background: url(../images/icon.png) no-repeat; 8 background-position: -154px -42px; 9 }
效果:
4、位置跟随
如上一个效果,加号跑到购物系统的后面,而不是在,左上角,如果设置了left,top等的值,
加号的位置就会发生改变了