У меня очень новичок в позиционировании.
Я не могу на всю жизнь понять, почему я не могу расположить синюю часть внизу моей страницы поверх всех других элементов с абсолютным позиционированием и z-индексом.
Кажется, проблема связана с div с изображением, но я не уверен, почему. Логика компоновки кажется простой.
У меня есть div слева с классом 'left-frame', который действует как контейнер для левого контента. Этот div выглядит следующим образом:
.left-frame
{
display: inline-block;
height: 100vh;
width: 45vw;
position: relative;
vertical-align: top;
}
(я также не понимаю, почему я должен был указывать вертикальное выравнивание. Без него div основного изображения и div левого кадра были смещены, ноэто отдельный вопрос)
Правая сторона макета - это просто div с классом main-image, который имеет элемент img внутри и предназначен для остальной части экрана. Стилизовано следующим образом:
.main-image
{
width: 54vw;
height: 100vh;
display: inline-block;
}
.main-image img
{
width: 100%;
height: 100%;
object-fit: cover;
}
Наконец, нижняя синяя часть должна выглядеть как баннер с контактной информацией, расположенной поверх всех остальных элементов. В настоящее время это оформляется следующим образом:
.contacts__body
{
background: var(--main-blue);
width: 100vw;
position: absolute;
z-index: 10;
}
Абсолютное позиционирование с z-индексом не работает должным образом. Я знаю, что я делаю что-то не так, но не могу понять, почему.
Ниже приведен окончательный дизайн, который я пытаюсь воссоздать для справки.
Также полный код приведен здесь в коде с различными изображениями. https://codepen.io/dansoutar/pen/OJJJmdm?editors=1000
последний выстрел
Спасибо за любые идеи.