Позиционирование absolut элемента относительно родительского
Как спозиционировать элемент с position: absolute внутри другого такого же элемента с position: absolute. Если не указывать left, top, то элемент выводится чуть ниже родительского. Мне нужно его немного сместить. Указав left и top можно расположить элемент по указанным координатам, но теряется связь с родительским. И всё это сделать без JavaScript. С JS вопроса бы и не возникло. Теперь чуть подробнее. Может и изобретаю велосипед, но мне нужно было сделать многоуровневое popup меню. Конечно, я искал уже готовые решения, но ничего подходящего не было. Сейчас это реализовано, буквально, 2-3 небольшими классами. Проблема в том, что подменю отображается ниже родительского элемента, перекрывая остальные. Сменить position на relative нельзя — тогда подменю будет занимать место в основном меню. Координаты определить нельзя — они непостоянные. И повторюсь ещё раз — без использования JavaScript. Возможно ли сделать такое?
Отслеживать
задан 26 ноя 2015 в 10:31
612 5 5 серебряных знаков 14 14 бронзовых знаков
26 ноя 2015 в 10:41
Родительский элемент не имеет фиксированного местоположения. Иначе можно было бы задать и left, top подменю. В этом и загвоздка. Родительское меню появляется пр наведении (:hover) на определённый элемент, который можно установить в любом месте страницы. При наведении на пункт с подменю, нужно его показать, чтобы оно не перекрывало остальные. Могу сказать, что если задать left, то всё хорошо — подменю показывается относительно родительского. А вот, с top такой фокус не прошёл.
26 ноя 2015 в 10:48
Хм, я, кажется, не так понял пример. Это может быть хорошим решением. Спасибо, попробую применить его.
relative и absolute
Обычно относительное позиционирование само по себе применяется не часто, поскольку для смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform . Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative , а для дочернего absolute , то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 1).
Рис. 1. Значения свойств left, right, top и bottom для вложенного элемента
Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются. В примере 1 прямоугольник располагается в правом нижнем углу блока возле границы.
Пример 1. Использование position
Результат данного примера показан на рис. 2.
Рис. 2. Положение вложенного элемента относительно родителя
Для родителя допустимо указывать значение relative , absolute , fixed или sticky . Если у дочернего элемента свойство position задано как absolute , то отсчёт координат ведётся от родителя. В примере 2 показано сочетание абсолютного позиционирования для размещения даты в левом верхнем углу фотографии.
Пример 2. Использование absolute
Результат данного примера показан на рис. 3.
Рис. 3. Вывод даты в левом верхнем углу
Сочетание относительного и абсолютного позиционирования можно применять и к псевдоэлементам ::before и ::after. Это сокращает размер кода HTML, поскольку нам уже не нужны лишние элементы, и позволяет делать всякие интересные декоративные эффекты. В примере 3 показано создание всплывающей подсказки.
Пример 3. Создание всплывающей подсказки
Текст самой подсказки мы пишем в пользовательском атрибуте data-tooltip и выводим его с помощью свойства content со значением attr(data-tooltip) . Остальной код CSS используется для оформления этого текста (рис. 4).
Рис. 4. Вид всплывающей подсказки
Позиционирование вложенного элемента относительно родительского
Для абсолютного позиционирования в CSS используется свойство position:absolute; Затем изменяя свойства left, top, right или bottom позиционируется элемент на странице. Но позиционирование происходит относительно окна браузера, и при изменении размеров браузера элемент начинает плавать по странице. Решение проблемы оказалось простым, для родительского элемента необходимо задать свойство position:relative; после чего вложенный элемент позиционируется относительно родительского, а не относительно окна браузера.
Позиционирование относительно родителя в 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 .
Повторите страницу по данному образцу:
Повторите страницу по данному образцу:
Повторите страницу по данному образцу:
Повторите страницу по данному образцу:
Повторите страницу по данному образцу: