css – 为什么大的负边际权利使绝对元素不包裹?

前端之家收集整理的这篇文章主要介绍了css – 为什么大的负边际权利使绝对元素不包裹?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_1@更新:

位置值会改变宽度.

JSFiddle:http://jsfiddle.net/caicai/mbtb5m7p/2/

为什么div .a2的宽度等于其父的宽度,而div .a1中的文本不会包装?

JSFiddle:http://jsfiddle.net/caicai/mbtb5m7p/

.r {
    position: relative;
    width: 100px;
    height: 22px;
    background: blue;
}
.a1 {
    position: absolute;
    top: 30px;
    margin-right: -9999px;
    background: green;
}
.a2 {
    position: absolute;
    top: 60px;
    background: orange;
}
<div class="r">
    <div class="a1"> 
        Why does this line no wrap. 
    </div>
    <div class="a2"> 
        Why does this line wrap. 
    </div>
</div>

解决方法

div.r的宽度为100px,相对放置.

孩子们.a1和.a2是绝对的.与他们(相对放置)的父母有关.

没有负边际,孩子的最大宽度等于其父母的大小.

但是,通过增加负边距,您可以让孩子们“浮动”其父母边界.

猜你在找的CSS相关文章