Как работает z-index на относительных родительских и относительных дочерних элементах? - PullRequest
Новая
       42

Как работает z-index на относительных родительских и относительных дочерних элементах?

0 голосов
/ 24 мая 2019

Как работает z-index? 


 <div class="picture">
      <img src="img/japan1.png" alt="">
      <img src="img/japan2.png" alt="">
      <img src="img/japan3.png" alt="">
      <img src="img/japan4.png" alt="">
      <img src="img/japan5.png" alt="">
  </div>


*{
    box-sizing: border-box;
}

.picture{

    background-color:rgb(189, 178, 155);
    height: 540px;
    width:960px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
    z-index:-1;


}
img
{
    width:960px;
    height:540px;
    position: relative;
    z-index: 0;

}


img:nth-child(1){

    top:50px;
    z-index:2;

}
img:nth-child(2){

    top:125px;
    z-index:10;

}
 img:nth-child(3){
    top:186px;
    z-index:6;
 }

Я ожидал, что z-index будет работать, но я вижу только первый дочерний и фоновый цвета на экране.Что происходит?При абсолютной позиции на img он работает хорошо. введите описание изображения здесь

...