пошаговая инструкция и объяснение почему это происходит
Когда мы верстаем блоки "потоком", блок, поставленный ниже отображается на слой выше, поэтому нижний перекроет тень верхнего.
В макете header имеет тень, в css она прописана следующим образом
box-shadow : 0px 6px 11px 0px rgba ( 0 , 0 , 0 , 0.53 );
Но, как мы видим, она не отображается. Для этого, нужно воспользоваться свойством z-index, которое поставит верхний блок выше слоем, но при этом мы должны изменить верхнему блоку позиционирование - position по умолчанию, которое имеет значение static.
Нам нужно изменить его на relative, что сделает блок "подвижным". И только после этого прописываем z-index с положительным числом. Что бы не ошибиться, можно поставить число побольше.
Итого получаем код для верхнего блока, которые должен иметь тень
.bluebar {
position : relative ;
z-index : 100 ;
padding : 0 ;
margin : 0 ;
height : 100px ;
background-image : linear-gradient ( #17384e , #10222f );
box-shadow : 0px 6px 11px 0px rgba ( 0 , 0 , 0 , 0.53 );
}
Верстка сайта нашей студии https://trendspacevl.ru/