Question

更新

位置值将改变宽度。

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>

Answer 1

div.r的宽度为100px，并且是相对的。

儿童.a1和.a2是绝对的。相关的（相对位置的）父母。

如果没有负边距，孩子们将采用与父母大小相等的最大宽度。

但是，通过添加负边距，您可以让孩子们“漂浮”其父母边界。

Answer 2

并不是.a1的内容不再包裹，而是.a1的内容无需包裹，因为可用的内部空间已经足够宽你的负边距内的字符串。

因此，您的div.a1基本上是.r的宽度+负边距的值，这会拖出右边的边并增加div的大小。

这就是盒子模型的工作原理，请查看here或here

Answer 3

边距取决于它的父元素（class / id），其中类r为类a1和a2。

1）现在你有父类（Class .r）的宽度：100px所以所有子类（类a1和a2）都继承相同的宽度。

2）类a2没有问题，该类完全正常，因为没有唯一（不同）属性而不是父类（.r），所以行为正常。

3）现在是类.a1的情况，它的行为也正常，直到找到 margin-right：negativeValue; 。

首先了解边缘，边距是类/元素块与其父类/元素块之间的空间。例如margin-left：5px;这样特定的块在从左边离开5px后开始，分别用于休息三边（顶部，底部，右边）

现在使用负边距时，它的作用是侵入其父块边界。那就是它超越了父母的界限。所以在这里你指定了margin-right：-9999px;所以它超出了类.r的边界，仍然可能会让你认为-9999px是一个巨大的值，应该将div抛到屏幕之外，但是在有限的文本中它只显示文本所包含的区域。 /强>

在类a1中插入更多文本肯定会超出屏幕范围，但文本应该足够了。

Graphical Explanation 已更新

为什么大的负边际权利使绝对元素没有包裹？

3 个答案: