1

Как спозиционировать элемент с position: absolute внутри другого такого же элемента с position: absolute.

Если не указывать left, top, то элемент выводится чуть ниже родительского. Мне нужно его немного сместить. Указав left и top можно расположить элемент по указанным координатам, но теряется связь с родительским.

И всё это сделать без JavaScript. С JS вопроса бы и не возникло.

Теперь чуть подробнее. Может и изобретаю велосипед, но мне нужно было сделать многоуровневое popup меню. Конечно, я искал уже готовые решения, но ничего подходящего не было.

Сейчас это реализовано, буквально, 2-3 небольшими классами. Проблема в том, что подменю отображается ниже родительского элемента, перекрывая остальные. Сменить position на relative нельзя - тогда подменю будет занимать место в основном меню. Координаты определить нельзя - они непостоянные.

И повторюсь ещё раз - без использования JavaScript.

Возможно ли сделать такое?

4
  • может так jsfiddle.net/soledar10/qdrtk2vk
    – soledar10
    26 ноя 2015 в 10:41
  • Родительский элемент не имеет фиксированного местоположения. Иначе можно было бы задать и left, top подменю. В этом и загвоздка. Родительское меню появляется пр наведении (:hover) на определённый элемент, который можно установить в любом месте страницы. При наведении на пункт с подменю, нужно его показать, чтобы оно не перекрывало остальные. Могу сказать, что если задать left, то всё хорошо - подменю показывается относительно родительского. А вот, с top такой фокус не прошёл.
    – Vitaly
    26 ноя 2015 в 10:48
  • Хм, я, кажется, не так понял пример. Это может быть хорошим решением. Спасибо, попробую применить его.
    – Vitaly
    26 ноя 2015 в 11:07
  • Получилось. Так, как и было нужно. Спасибо.
    – Vitaly
    26 ноя 2015 в 15:51

1 ответ 1

1

.parent-absolute{
    position: absolute; top: 50px; left: 50px;
    width: 150px;
    height: 150px;
    background: #ccc;
}
.child-relative{
    position: relative;
}
.child-absolute{
    position: absolute; top: 0; left: 0;
    width: 100px;
    height: 100px;
    background: #00f;
}
<div class="parent-absolute">
    <div class="child-relative">
        <div class="child-absolute">
            child-absolute
        </div>
    </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.