Как позиционировать элемент с position absolute относительно родителя
Перейти к содержимому

Как позиционировать элемент с position absolute относительно родителя

  • автор:

Позиционирование относительно родителя в CSS

Если элементу задан relative , а его потомку — absolute , то этот потомок будет позиционироваться относительно своего родителя, а не относительно окна браузера.

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

Давайте посмотрим на примерах.

Пример

Для начала давайте просто сделаем блок-родитель и блок-потомок без позиционирования:

#parent < width: 500px; height: 300px; margin: 0 auto; border: 1px solid red; >#child < width: 200px; height: 200px; border: 1px solid green; >

Пример

Давайте теперь абсолютно спозиционируем зеленый блок. Так как родителю не указан relative , то потомок будет позиционироваться относительно окна браузера:

#parent < width: 500px; height: 300px; margin: 0 auto; border: 1px solid red; >#child < position: absolute; top: 20px; left: 20px; width: 200px; height: 200px; border: 1px solid green; >

Пример

Укажем теперь родителю relative . В этом случае потомок будет позиционироваться относительно своего родителя:

#parent < position: relative; width: 500px; height: 300px; margin: 0 auto; border: 1px solid red; >#child < position: absolute; top: 20px; left: 20px; width: 200px; height: 200px; border: 1px solid green; >

Практические задачи

В следующих задачах основной блок стоит по центру с помощью margin в значении auto , а остальные позиционируются относительно него с помощью свойства position .

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Свойство position

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

position: static

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Его можно также явно указать через CSS-свойство:

position: static;

Такая запись встречается редко и используется для переопределения других значений position .

Здесь и далее, для примеров мы будем использовать следующий документ:

 
Без позиционирования ("position: static").

Заголовок

А тут - всякий разный текст.
. В две строки!

В этом документе сейчас все элементы отпозиционированы статически, то есть никак.

Элемент с position: static ещё называют не позиционированным.

position: relative

Относительное позиционирование сдвигает элемент относительно его обычного положения.

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

position: relative; top: 10px;
 h2 
Заголовок сдвинут на 10px вниз.

Заголовок

А тут - всякий разный текст.
. В две строки!

Координаты

Для сдвига можно использовать координаты:

  • top – сдвиг от «обычной» верхней границы
  • bottom – сдвиг от нижней границы
  • left – сдвиг слева
  • right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

 h2 
Заголовок сдвинут на 10% влево.

Заголовок

А тут - всякий разный текст.
. В две строки!

Свойства left/top не будут работать для position:static . Если их всё же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

position: absolute

position: absolute;

Абсолютное позиционирование делает две вещи:

  1. Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
  2. Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.
  • Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
  • Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).

Например, отпозиционируем заголовок в правом-верхнем углу документа:

 h2 
Заголовок в правом-верхнем углу документа.

Заголовок

А тут - всякий разный текст.
. В две строки!

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

Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.

Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

Одновременное указание left/right , top/bottom

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

Браузер растянет такой элемент до границ.

 div 
10px от границ

Позиционирование вложенного элемента относительно родительского

Для абсолютного позиционирования в CSS используется свойство position:absolute; Затем изменяя свойства left, top, right или bottom позиционируется элемент на странице. Но позиционирование происходит относительно окна браузера, и при изменении размеров браузера элемент начинает плавать по странице. Решение проблемы оказалось простым, для родительского элемента необходимо задать свойство position:relative; после чего вложенный элемент позиционируется относительно родительского, а не относительно окна браузера.

Позиционирование относительно абсолютного родителя в CSS

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

Может быть и такое, что у родителя задан absolute . В этом случае потомки с absolute также будут позиционироваться относительно такого родителя, а не относительно окна браузера:

#parent < position: absolute; top: 100px; left: 200px; width: 500px; height: 300px; border: 1px solid red; >#child < position: absolute; top: 0; left: 0; width: 200px; height: 200px; border: 1px solid green; >

Трепачёв Дмитрий © 2012-2024
t.me/trepachev_dmitry

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *