Отрицательные поля

Любопытно, что если задать отрицательные значения для полей, то перемещаемые элементы могут выйти за границы их родительских элементов. Кажется, что это полностью противоречит описанным выше правилам, но это не так. Точно так же, как элементы могут казаться шире своих родителей из-за отрицательных полей, перемещаемые элементы могут оказываться вне своих родителей. Рассмотрим перемещаемое изображение, которое смещается влево и имеет поля слева и сверху по –15px. Это изображение размещается внутри элемента div, у которого нет отступов, рамок или полей. Вопреки очевидности это не нарушает ограничений на перемещаемые элементы, размещаемые вне их родительских элементов. Внимательно прочитав правила предыдущего раздела, можно понять техническую сторону вопроса, которая делает возможным такое поведение: внешние края перемещаемого элемента должны находиться в родительском элементе. Однако отрицательные поля могут разместить содержимое перемещаемого элемента так, что оно будет перекрывать собственный внешний край.

С математической точки зрения ситуация выглядит примерно так: примем, что верхний внутренний край элемента div соответствует координате 100 пикселов. Чтобы определить, где должен находиться верхний внутренний край перемещаемого элемента, броузер сделает следующее: 100px + (-15px) margin + 0 padding = 85px.


Таким образом, верхний внутренний край перемещаемого элемента должен соответствовать координате 85 пикселов; вычисления не противоречат спецификации, даже несмотря на то, что это выше, чем верхний внутренний край родителя перемещаемого элемента. Аналогичная цепочка доказательств объясняет, как левый внутренний край перемещаемого элемента может оказаться левее левого внутреннего края его родителя.

У многих из вас, возможно, прямо сейчас появилось непреодолимое желание крикнуть: «Это не по правилам!». Лично я вас не осуждаю. Кажется совершенно неправильным, например, позволить верхнему внутреннему краю располагаться выше верхнего внешнего края, но при наличии отрицательного верхнего поля именно так и получается; точно так же, как и применение отрицательных полей к обычным неперемещаемым элементам может сделать их визуально шире родителей. То же самое происходит и со всеми четырьмя сторонами блока перемещаемого элемента: если задано отрицательное поле, содержимое выйдет за внешний край, не нарушая при этом спецификации.

Здесь возникает один важный вопрос: что происходит с представлением документа, когда элемент перемещается за границы родительского элемента при задании отрицательных полей? Например, сильно выступающее вверх изображение могло бы задеть абзац, уже отображенный агентом пользователя.


В подобных случаях агент пользователя решает, должен ли быть перестроен поток документа. Спецификации CSS1 и CSS2 явно говорят, что от агентов пользователя не требуется перестраивать предыдущее содержимое с целью согласования с тем, что имеет место в документе позже. Иначе говоря, если изображение перемещается в предыдущий абзац, оно может просто перекрыть то, что там находится. С другой стороны, агент пользователя может обрабатывать ситуацию, задавая обтекание перемещаемого изображения содержимым. В любом случае не следует рассчитывать на определенное поведение, что ограничивает применение отрицательных полей в перемещаемых элементах. Перемещаемые элементы довольно безопасны, но пытаться вытолкнуть их вверх не стоит.

У перемещаемого элемента есть еще одна возможность выйти за внутренний левый и правый края его родителя: элемент должен быть шире своего родителя. В этом случае в благородном порыве отобразить себя правильно перемещаемый элемент просто выйдет за правый или левый внутренний край в зависимости от того, как он перемещается. Это приведет к результату.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание