z-index не работает с position relative

214

03 сентября 2018, 21:30

Я создал fiddle для демонстрации проблемы, но необходимо показать код и здесь.

Необходимо, чтобы "hero" div находился вверху другого (overlap) при наведении. Но при этом происходит смещение других div , поэтому я присвоил ему высокий z-index и relative позиционирование, но это не помогает.

Также может кто-нибудь сказать мне, как удалить линейный градиент из свойства фона div при наведении курсора, не указывая снова background в :hover.

.holder { 
  margin-top: 10vh; 
  margin-left: 10vw; 
  width: 90vw; 
  height: 90vh; 
  position: relative !important; 
  z-index: 0; 
} 
 
.hero { 
  height: 100%; 
  background-size: cover !important; 
  background-position: center !important; 
  background-repeat: no-repeat !important; 
  width: 20%; 
  display: inline-block; 
  z-index: 0; 
  position: relative !important; 
} 
 
#first { 
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg'); 
} 
 
#second { 
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg'); 
} 
 
#third { 
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg'); 
} 
 
#fourth { 
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg'); 
} 
 
.hero:hover { 
  z-index: 1000 !important; 
  width: 27vw; 
  cursor: pointer; 
}

<div class="holder"> 
  <div class="hero" id="first"></div> 
  <div class="hero" id="second"></div> 
  <div class="hero" id="third"></div> 
  <div class="hero" id="fourth"></div> 
</div>

https://jsfiddle.net/aks30498/8waty2m9/27/

Answer 1

Gradient и image устанавливаются с использованием того же свойства, которое является фоном, поэтому вы не можете справиться с этим, используя z-index.

Вы можете изменить background-size, чтобы скрыть градиент при наведении. Затем вы можете использовать transform, чтобы увеличить изображение и наложить другое:

Я удалил ненужный код из вашего сниппета

.holder { 
  margin-top: 10vh; 
  margin-left: 10vw; 
  width: 90vw; 
  height: 90vh; 
} 
 
.hero { 
  height: 100%; 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  width: 20%; 
  display: inline-block; 
} 
 
#first { 
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg'); 
} 
 
#second { 
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg'); 
} 
 
#third { 
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg'); 
} 
 
#fourth { 
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg'); 
} 
 
.hero:hover { 
  background-size: 0 0, cover; 
  transform:scale(1.4); 
  cursor: pointer; 
}

<div class="holder"> 
  <div class="hero" id="first"> 
 
  </div> 
  <div class="hero" id="second"> 
 
  </div> 
  <div class="hero" id="third"> 
 
  </div> 
  <div class="hero" id="fourth"> 
 
  </div> 
</div>