2

Существует некий блок:

<div class="head">
</div>

Ему задан стиль:

.head {
width: 600px;
height: 200px;
overflow: hide;
}

В этом блоке есть картинка и два других элемента:

    <div class="head">
    <img class="head_bg_img" src="img/a.jpg">

    <div class="head_info">

Информация о компании
</div>

<h1 class="name">Имя компании</h1>
</div>

Для трёх элементов заданы такие стили:

.name, head_info{
position: relative;
float: left;
}

.head_bg_img {
position: relative;
width: 100%;
top: -200px;
}

По идее, элемент head_bg_img должен быть на заднем фоне, но он перекрывает остальные два. Пробовал применять также и z-index но иэто не увенчалось успехом. Как быть?

2 ответа 2

2

.head {
width: 600px;
height: 200px;
overflow: hide;
}

.name, .head_info{
position: relative;
float: left;
}

.head_bg_img {
position: absolute;
width: 100%;
top: -200px;
}
<div class="head">
    <img class="head_bg_img" src="https://tehtube.tv/img/logo.png">

    <div class="head_info">

Информация о компании
</div>

<h1 class="name">Имя компании</h1>
</div>

1

У кого-то должен быть position: absolute;

.name, 
.head_info{
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  float: left;
}

.head_bg_img {
  position: relative;
  width: 100%;
  top: -200px;
}
<div class="head">
    <img class="head_bg_img" src="http://www.runcms.org/wp-content/uploads/2013/05/obtekanie-kartinki-tekstom-html.jpg">

    <div class="head_info">
      Информация о компании
    </div>

    <h1 class="name">Имя компании</h1>
</div>

Либо отрицательный margin:

.name, 
.head_info{
  position: relative;
  top: -250px;
  float: left;
}

.head_bg_img {
  position: relative;
  width: 100%;
  top: -200px;
}
<div class="head">
    <img class="head_bg_img" src="http://www.runcms.org/wp-content/uploads/2013/05/obtekanie-kartinki-tekstom-html.jpg">

    <div class="head_info">
      Информация о компании
    </div>

    <h1 class="name">Имя компании</h1>
</div>

Но ничего не перекрывается.

1
  • Блин. Здесь есть ищо один нюанс. Блок head должен двигатся в лево при нажатии кнопки. Из этого выходит что когда кнопка нажимается то блок head уезжает влево а блок с position:absolute стоит на месте.
    – Ezdrael
    4 окт 2016 в 15:17

Ваш ответ

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

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