css之absolute绝对定位(绝对定位特性)

学习了绝对定位以后,对此进行一个总结,啦啦啦啦~

 

 

绝对定位特性

  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等的值,加号的位置就会发生改变了

posted @ 2016-10-13 15:58  yerr1990  阅读(342)  评论(0编辑  收藏  举报