Элементы CSS, которые не занимают места

Когда вы размещаете элемент на странице в разметке и не задаете для него никаких особых стилей, то он, в большинстве случаев, займет именно то место, которое и занимает визуально.

Другими словами, если вы разместили на своей странице бокс размером 200px на 200px, то все, что вы расположите в коде после него, если не добавлять других стилей, займет место ниже зеленого бокса или рядом с ним, вне его границ.

Однако не все на HTML-странице занимает место, учитываемое соседними элементами. Я решил, что стоило бы перечислить и описать всё то из CSS, что не занимает такого физического пространства в HTML-документе.

Абсолютно позиционированные элементы

Таковыми являются элементы, значение свойства position которых установлено в absolute или fixed. Эти элементы удаляются из нормального потока документа, следовательно, элементы, следующие в потоке за ними, не будут размещаться рядом с ними или ниже их. То есть другие элементы будут вести себя так, словно абсолютно позиционированных элементов в потоке и вовсе не существует.

occupy-absolute-rus1

JS Bin demo

Значения смещения для относительно позицинированных элементов

В отличие от абсолютно позиционированных элементов элементы со свойством position, значение которого relative занимают место. Однако само смещение, появляющееся в результате применения к относительно позиционированному элементу свойств top, right, bottom или left, места не занимает. Это может показаться странным на первый взгляд, но давайте посмотрим на изображение ниже:

occupy-relatives-rus1

JS Bin demo

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

Внешние границы, задаваемые через свойство outline

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

Взгляните на следующий пример:

occupy-outline-rus

JS Bin Demo

Заметьте, что синий бокс имеет внешнюю границу (свойство outline со значением 50px solid yellow). И эта внешняя граница перекрывает собой следующий за синим боксом розовый бокс вместо того, чтобы сдвинуть его вниз (это произошло бы, если бы вы воспользовались свойством border вместо outline).

Смещения, вызываемые трансформациями

Во многих случаях трансформации ведут себя подобно относительно позиционированным элементам. Наиболее яркий пример подобных трансформаций – трансформации перемещения, которые задаются при помощи функции translate().

После перемещения элемента при помощи свойства transform трансформированный элемент меняет свое местоположение практически тем же самым способом, что и был описан в разделе об относительно позиционированных элементах. А это значит, что место, которое первоначально занимал элемент, останется занятым, словно сам элемент никуда не перемещался. Однако смещения, полученные после перемещения, места занимать уже не будут.

occupy-transforms-rus

JS Bin Demo

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

Тени

Тени для текста и боксов тоже попадают в категорию элементов, которые не влияют на поток документа вокруг них, ибо не занимают места. При применении теней, как и во всех прочих случаях, рассмотренных нами в данной статье, никакого воздействия на местоположение соседних элементов не происходит.

occupy-shadow-rus

JS Bin Demo

Эта особенность теней может иметь немаловажное значение при центрировании элемента по вертикали или горизонтали. Если у элемента имеется тень на одной стороне, но отсутствует на противоположной, то у вас могут возникнуть проблемы с его размещением по центру. Дело в том, что при центрировании элемента правило, вроде margin: 0 auto, не учитывает величину тени, так что вам придется добавить отступ и с противоположной стороны или что-нибудь подобное, если, на ваш взгляд, это портит внешний вид.

Прочие случаи

Прочие случаи, связанные с CSS и попадающие под категорию «не занимающих места»:

  • Эффекты отражения в WebKit;
  • Нестандартные фильтры для IE;
  • text-decoration;
  • Элементы с display: none, которые отличаются от элементов с visibility: hidden, ибо последние место занимают.

Что насчет элементов, которые выходят за заданную область?

Есть один очень важный момент, который вам стоит учитывать: хоть во всех вышеприведенных случаях элементы не будут занимать место в документе, но при этом они могут стать причиной появления скроллбара, если соответствующим образом размещены вне родительского элемента или вне «окна».

Какая-нибудь тень для текста не станет причиной подобной проблемы, но трансформированный или относительно позиционированный элемент вполне может. И хотя смещения, образованные при трансформации или позиционировании элементов не занимают места и не влияют на размещение соседних элементов, они вполне могут стать причиной генерации необходимых скроллбаров их родительскими элементами или даже окном (если, конечно, этому родительскому элементу не задан overflow: hidden).

«Занимают место» — не самое удачное выражение?

Возможно, оборот «не занимают место» – не самый лучший вариант, хотя он был использован на протяжении всей статьи.

Когда о таких вещах заходит речь в спецификациях, там обычно употребляются обороты наподобие «не вызывают перерасчета дерева отрисовки». Но я писал эту статью с упором на доступность материала. Думаю, нетрудно понять, что я имел в виду под выражениями вроде «занимать место», так что я ничуть не претендую на строгую корректность терминологии в этой статье. Все же, понимание сути самого явления важнее, чем выбор слов для его передачи.

Оригинал статьи и автор.

Поделиться с друзьями:

Блог веб-разработчика

Приветствую вас в своем блоге. Здесь вы найдете информацию о различных около-веб темах; об особенностях CMS Wordpress, о верстке CSS, программировании HTML, Javascript и так далее. Подписывайтесь на мой канал, будьте в курсе последних тенденций из мира веб.