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

无依赖的绝对定位

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

例子1:实现左右上角的图标覆盖,如图,

aaarticlea/png;base64,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" alt="" />

左边

 .icon-recom {
position: absolute;
line-height: 20px;
padding: 0 5px;
background-color: #f60;
color: #fff;
font-size: 12px;
}

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

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

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

aaarticlea/png;base64,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" alt="" />

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

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

上一篇:在线工具集合(新增cron quartz表达式在线生成……)


下一篇:Servlet--Servlet接口