Двойной z-index в одном DIV

236

20 сентября 2017, 09:56

Есть такой код:

<div class="inner">
   <div class="title">
      <h1>Тема такая-то</h1>
   </div>
 <p>Описание такое-то</p>
</div>
<div class="menu">
Пункты меню
</div>

Необходимо, чтобы слои шли в следующем порядке: на заднем плане inner, затем menu и сверху title. Если title присвоить z-index выше, чем у menu, то и inner тоже вылезает над меню, так как это его родитель. Дело в том, что класс inner выводится на экран плагином за раз и отдельно вынести title из него не получится. А нужно, чтобы он был над меню. Вот, для наглядности.

unarque и For suggestions принадлежать одному DIV, который выводится целиком одним плагином. Сейчас у этого DIV z-index выше, чем у меню. Все супер, но при раскрытии меню, оно проваливается под текст For suggedtions. Как быть?

Answer 1

Смотря какой css:

.inner { 
  position: relative; 
  background: #000; 
  color: #fff; 
  height: 100px; 
} 
 
.menu { 
  background: #ccc; 
  position: absolute; 
  top: 20px; 
  height: 60px; 
} 
 
.wrap { 
  position: relative; 
} 
 
.title { 
  position: absolute; 
  color: red; 
  z-index: 3; 
  top:10px; 
  margin: 0; 
}

<div class="wrap"> 
  <div class="inner"> 
     <div class="title"> 
        <h1>Тема такая-то</h1> 
     </div> 
   <p>Описание такое-то</p> 
  </div> 
 
  <div class="menu"> 
  Пункты меню 
  </div> 
</div>

С fixed, тоже можно.