Многослойная верстка?

Question

[Артем Лукьянов]

Нужно сверстать некоторый элемент, который состоит из нескольких слоев. Юзаю связку позиционирования relative->absolute. Т.е. есть див с position: relative, а внутри него дивы(слои) с position: absolute. Вроде все ок, но таким образом высота родительского дива равна 0, из за чего все перекрывается другими элементами на странице. Делать статическую высоту не вариант, ибо на разных устройствах получается разная высота. Есть какой нибудь вариант чтобы высота рассчитывалась автоматически, при этом многослойность не терялась?

Comments

[FeST1VaL]

считать через JS высоту)

[Евгений Вольф]

А все вложенные блоки имеют одинаковую высоту или... ?

[Михаил]

флоты?

[profesor08]

Организуй пример на jsfiddle, codepen

[Рома Зварич]

ArtyomPLAY , сбросьте пример кода на CodePen

[Артем Лукьянов]

Рома Зварич, profesor08, https://jsfiddle.net/ArtyomPLAY/pfne7obc/38/
Нужно чтобы красный див был подложкой у дива,в котором лежат заголовки и при этом чтобы высота родительского дива рассчитывалась автоматически

[Артем Лукьянов]

Евгений Вольф, нет, один слой это некоторое свг изображение, но ставить его через background-image не вариант, т.к в зависимости от устройства/разрешения изображение ведет себя по-разному
2й слой это текст и кнопка, на основе которых и должен растягиваться родительский див

[tema_sun]

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

[tema_sun]

Вам вот так что ли нужно https://jsfiddle.net/5ozv0qpn/ ?

[Рома Зварич]

ArtyomPLAY, одна из Ваших ошибок в коде - Вы хотите, чтобы абсолютно позиционированный блок отталкивался не от родительского, а от соседнего элемента. Так нельзя. Нужно вложить.
У Вас нет макета, как должно получиться?
Из описания все равно трудновато понять, какой вид должен быть.

Пока что вот так получилось.
Оно?

[Артем Лукьянов]

tema_sun, мне нужно чтобы родительский див растягивался в соответствии с контентом в диве, где есть текст и кнопки. Растягиваться ему нужно для того, чтобы весь элемент имел бэкграунд. Фиксированная высота не вариант в данном случае.

[Артем Лукьянов]

Рома Зварич, да, спасибо!

[Артем Лукьянов]

tema_sun, отлично, спасибо!

[Рома Зварич]

ArtyomPLAY, отправил в виде ответа.
Можете пометить решением, если помогло: https://toster.ru/answer?answer_id=1420868#answers...

Answer 1

[Сергей delphinpro]

Один из слоев, самый нижний, не делайте абсолютом

Comments

[Артем Лукьянов]

но при этом второй слой съезжает вниз. вот jsfiddle: https://jsfiddle.net/ArtyomPLAY/pfne7obc/38/
Нужно чтобы красный див был подложкой у дива,в котором лежат заголовки и при этом чтобы высота родительского дива рассчитывалась автоматически

[Сергей delphinpro]

ArtyomPLAY, Ваш фидл не отражает реальной задачи. По этому фиддлу я могу посоветовать лишь сделать красный фон у контентного блока, безо всяких абсолютов.

[Сергей delphinpro]

ArtyomPLAY, ну или навскидкку https://jsfiddle.net/uwbfkgyq/

Answer 2

[Рома Зварич]

ArtyomPLAY, одна из Ваших ошибок в коде - Вы хотите, чтобы абсолютно позиционированный блок отталкивался не от родительского, а от соседнего элемента. Так нельзя. Нужно вложить.
У Вас нет макета, как должно получиться?
Из описания все равно трудновато понять, какой вид должен быть.

Пока что вот так получилось.
Оно?

Answer 3

[Антон Шаманов]

z-index