Как сверстать блок что бы при открытии не закрывал другие блоки?

Question

[AlinaMoskaluk]

Привет.
Есть макет . Нарисован блок который по сути и на одной секции и часть находится на другой.
Задаю этому блоку с ценой position: absolute.

НО ..
Там есть кнопка "Посмотреть больше" при нажатии открывается список с ценами. И нужно что бы просто этот открыты список подвинул вниз все блоки внизу.. не перекрывал его .. но через position: absolute. это не получается..
Есть какой то другой вариант это сделать правильно?
Спасибо

Comments

[Антон Литвиненко]

не надо абсолют. сделать ему маргин-боттом минус 100 пикселей, а у следущего блока соответствующий паддинг сверху

[Николай Угольников]

Градиентом можно сделать

[gogowq]

А зачем тут вообще абсолют то?
Ну либо марджином двигай,как сказали выше,либо же бекграунд сделай блоку с ценами сине-белым,чтоб казалось что элемент лежит на элементе.

background: linear-gradient(to bottom, #002780 80%, white 20%);

Для общего понимания о бекграунде


Для div 2 в котором лежит div3 с паддингами ,делаем linear-gradient

Answer 1

[svm2001]

Тебе нужен аккордеон. Просто простиль кнопку аккордеона как тебе нужно и контент размести внутри div с классом "accordion__inner".
https://codepen.io/francoiscoron/pen/NWyJQog

Пожалуйста.