Как сделать div поверх контента?

Question

[Eugenue Cesarevich]

Есть структура:

<div id='parent'>
    <div id='child'>
    <div/>
<div/>

Я хочу, чтобы div child не сдвигал остальные элементы в div parent, а как бы был бы поверх них. Такого эффекта можно достичь, если использовать position: absolute, но вот незадача, позиционирование всё-таки должно происходить относительно div parent, а если использовать position: absolute, то позиционирование происходит абсолютно, а не относительно.

Как мне получить эффект "поверх контента", который даёт position: absolute, но чтобы при этом позиционирование было относительным?

Answer 1

[TRNER]

Добавьте position: relative диву с айди parent

Comments

[Eugenue Cesarevich]

попробую. А в чём смысл? Просто довольно неочевидное решение (ну для меня, я плохо вёрстку знаю)

[Вадим]

Eugenue Cesarevich, Так пойдите и изучите основы вёрстки. Вы бы прочитали как это работает быстрее чем задали вопрос.
А теперь ещё и потратили время 3х человек(включая своё) на элементарный вопрос. И судя по количеству просмотров - 6 человек(и количество будет расти) потратили время на просмотр.

[Вадим]

Eugenue Cesarevich, https://www.internet-technologies.ru/articles/css-...

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

[TRNER]

Eugenue Cesarevich, https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

[Eugenue Cesarevich]

Вадим, зато кто-то найдёт готовый ответ, возможно :)

Answer 2

[asmodeus13th]

Eugenue Cesarevich, смысл в том, что "position: absolute" работает от ближайшего родительского элемента с "position: relative". По умолчанию "position: absolute" отталкивается от документа.

<div id="parent">
  <div id="child">
  </div>
</div>

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

#child{
  position: absolute;
}
#parent{
  position: relative;
}

Comments

[Eugenue Cesarevich]

Да, я уж понял... Интересное поведение. Но удобное.