Почему большой отрицательный margin-right делает абсолютный элемент без обертывания?

Update:

Значение позиции изменит ширину.

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>

Ответ 1

div.r имеет ширину 100 пикселей и помещается относительно.

Дети .a1 и .a2 помещаются как абсолютные. Связано с их (относительно размещенным) родителем.

Без отрицательного поля дети будут иметь максимальную ширину, равную его размеру родителей.

Но, добавив отрицательный запас, вы позволяете детям "плавать" над границами своих родителей.

Ответ 2

Не то, чтобы содержимое .a1 больше не было обертыванием, то содержимое .a1 не нужно обертывать, потому что доступное внутреннее пространство было достаточно широким, чтобы строка внутри него была отрицательной маркой.

Таким образом, ваш div.a1 будет по существу шириной .r + значением отрицательного поля, который перетаскивает правую конечность и увеличивает размер вашего div.

В целом, как работает модель коробки, проверьте здесь или здесь

Ответ 3

Поля - это то, что зависит от его родительского элемента (class/id) здесь class r для классов a1 и a2.

1) Теперь у вас есть ширина: 100px для родительского класса (класс .r), поэтому все дочерние классы (классы a1 и a2) наследуют одну и ту же ширину.

2) Нет проблемы для класса a2, этот класс абсолютно нормален, поскольку не имеет уникального (другого) свойства, чем родительский класс (.r), поэтому ведет себя корректно.

3) Теперь рассмотрим случай для класса .a1, который ведет себя правильно, пока не найдет margin-right: negativeValue;.

Итак, первое понимание поля, Margin - это пространство между блоком класса/элемента и его родительским классом/элементом. Для примера margin-left: 5px; так что конкретный блок начинается после выхода 5px слева, соответственно для отдыха трех сторон (сверху, снизу, справа)

Теперь отрицательные поля, когда используются то, что он делает, это нарушение границ их родительских блоков. То есть он выходит за рамки своих родителей. Итак, здесь вы указали margin-right: -9999px; поэтому он выходит за пределы класса .r, но все же он может подумать, что -9999px является огромным значением, должен выкинуть div за экран, но с ограниченным текстом он отображает только область, содержащуюся в тексте.

Вставляя больше текста в класс a1, он, несомненно, выходит за пределы экрана, но текст должен быть более чем достаточно.

Графическое объяснение Обновлено