0

Есть два одинаковых блока, им необходимо задать тень, которая должна выделять их поверх 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/

1 ответ 1

2

Как исправить этот непорядок с верхним блоком?

Это, как раз таки, и есть порядок, т.к. по умолчанию в общем потоке блоки идут друг за другом и друг над другом.

Чтобы изменить порядок наложения элементов друг на друга, используйте z-index:

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);
  position: relative;
  z-index: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.