css之absolute绝对定位(技巧篇)

无依赖的绝对定位

margin,text-align与绝对定位的巧妙用法

 

例子1：实现左右上角的图标覆盖，如图，

 左边

1 .icon-recom {
2     position: absolute;
3     line-height: 20px;
4     padding: 0 5px;
5     background-color: #f60;
6     color: #fff;
7     font-size: 12px;
8 }

 

右边也是同样的原理，在绝对定位的基础上，加上margin：-36px即vip这个元素的宽度即可，不加的话会出现在蓝色图片的右边，上一篇讲到过位置跟随的特性，不明白可以去参考

 

1 .icon-vip {
2     position: absolute;
3     width: 36px;
4     height: 36px;
5     margin-left: -36px;
6     background: url(http://img.mukewang.com/5453048000015d8800360036.gif);
7     text-indent: -9em;
8     overflow: hidden;
9 }

例子2：下拉列表。通过上一个例子，是不是可以想到这种下拉的框应该怎么实现呢？

和例子1同样的道理，下拉框设置无依赖的绝对定位后，margin-top设置输入框的高度就行了

 

此外，如果在这种absolute和margin的基础之上，加上父级的text-align:center,可以实现水平居中的效果，非常惊人

 

posted @ 2016-10-13 17:06  yerr1990  阅读(683)  评论(0)  编辑  收藏  举报