CSS-индекс не работает должным образом

Question

Недавно я начал изучать анимацию CSS3, и я построил небольшую страницу для тестирования этих анимаций. Но я столкнулся с проблемой относительно z-индекса. На моей тестовой странице есть остров в левом нижнем углу и две волны в нижней части окна. См. here

Я хочу разместить остров между двумя волнами, но это не происходит. HTML структура выглядит так:

<div class="seashore"> 
    ... 
    <img class="island" src="img/island.png" /> 
</div> 

<div class="sea"> 
    <img class="wave1" src="img/w1.png" /> 
    <img class="boat" src="img/tboat.png" /> 
    <img class="wave2" src="img/w2.png" /> 
</div> 

И Соответственные CSS

/* Some CSS */ 

.seashore { 
    position: absolute; 
    left:0%; 
    bottom: 0%; 
    width: 50%; 
    height: 600px; 
    z-index:990; 
    overflow: hidden; 
} 

.island { 
    position: absolute; 
    left: -1px; 
    bottom: 5%;; 
    z-index: 1002; 
} 

.sea { 
    position: fixed; 
    bottom: 0px; 
    width: 90%; 
    height: 60px; 
    z-index:980; 
    .... 
} 

.wave1 { 
    position: absolute; 
    top:0px; 
    left: 10px; 
    z-index: 1000; 
    .... 
} 

.wave2 { 
    position: absolute; 
    top: 8px; 
    left: -16px; 
    bottom: -3%; 
    z-index: 1004; 
    .... 

} 

.boat { 
    position: fixed; 
    bottom: -15%; 
    left: 75%; 
    /*-webkit-transform: rotate(45deg); 
    transform: rotate(45deg);*/ 
    z-index: 1003; 
    .... 
} 

г-индексы в следующем порядке:
море (980) < Взморье (990) < Wave1 (1000) < Island (1002) < Boat (1003) < wAVE2 (1004)

Я чувствую, что это может происходить из-за б oth волны и остров содержатся в разных родительских контейнерах. Но поскольку индекс z для обоих контейнеров установлен на минимальный, я думаю, что он должен работать.

Итак, мой вопрос в чем причина такого поведения? И есть ли какое-нибудь обходное решение?

Было бы лучше, если бы вы могли предоставить любую ссылку для этого же. Спасибо.

Answer 1

Удалите CSS для .sea и обновить positionz-index и волн:

.wave1 { 
    position: absolute; 
    bottom:0px; 
    left: 10px; 
    z-index: 900; 
    .... 
} 

.wave2 { 
    position: absolute; 
    bottom: 8px; 
    left: -16px; 
    bottom: -3%; 
    z-index: 1003; 
} 

Как уже упоминалось в ответе выше, вы могли бы просто использовать 1,2 и 3 для z-index.

Результат:

Answer 2

Вы должны содержать элементы в одном и том же div, прямо сейчас у вас есть морское побережье и море отдельно, и поэтому z-index эффективно «перезапускается» внутри каждого из них.

У побережья есть индекс z 909, и из этого социального воздушного шара и острова есть 991 и 1002 (они могли иметь только 1 и 2), потому что это было от 909 года на морском берегу.

Аналогичным образом с морем вы начинаете с 980, а затем с волной 1 - 1000, лодка - 1003, а волна 2 - 1004 (они могли быть 1, 2 и 3 соответственно).

просто поместите все движущиеся элементы внутри одного и того же div и дайте им каждый инкрементный z-индекс, который помещает их на нужный уровень для вашей страницы.

попытайтесь взглянуть на статью What No One Told You About Z-Index от Филиппа Уолтона.