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  阅读(343)  评论(0)  编辑  收藏  举报