Есть два одинаковых блока, им необходимо задать тень, которая должна выделять их поверх container
. Но при этом container
заезжает на верхний блок, отчего тень перекрывается фоном container
и оттого видна лишь частично. При этом с нижним блоком всё в порядке.
Как исправить этот непорядок с верхним блоком?
html
<div class="footer text-center text-uppercase">
<p>Заголовок Заголовок Заголовок</p>
</div>
<div class="container">
<div class="row">
<div class="header text-center">
<h1 class="text-uppercase"> <strong>Заголовок</strong></h1>
<h2>Подзаголовок</h2>
</div>
</div>
</div>
<div class="footer text-center text-uppercase">
<p>Заголовок Заголовок Заголовок</p>
</div>
css
body {
background-color: #eee;
}
.container {
background-color: #fff;
}
.footer {
padding: 15px;
font-size: 20px;
color: #fff;
background-color: #699;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}
Для большего удобства пример на CodePan: https://codepen.io/kjurrt/pen/PJzqVB/