Блок с z-index уходит за фон, в чем проблема?

Question

[Александр]

Подскажите если не трудно, в чем проблема. Вообще не пойму как работает z-index. Есть блок с фоном, в нем другой блок, которому задан position: relative и z-index: 10;. В этом блоке картинка, которой задан position: absolute; и z-index: 1; Мне нужно чтобы половина этой картинки была за блоком.

Прочитал несколько статей на счет z-index, и по плану должно ведь все работать, но ничего не работает. Игрался с цифрами по разному, и минусы задавал и плюсы и проценты. И увидел хоть какое-то движение, когда задал родителю z-index: 10%; а дочернему z-index: -1; Хотя о процентах я вообще нигде не читал, но хоть как-то заработало. Но когда задаешь -1 то картинка становится за фон. И короче я уже не знаю что делать. Помогите ))

Вот код https://codepen.io/rebrikover/pen/JLyMpp

Answer 1

[Евгений]

Проблема в том, что у дочернего элемента не может быть z-index меньше, чем у родительского, как в твоем случае.

Реализовать можно по-разному, в зависимости от того, что и как еще ты там захочешь расположить. Как вариант, изменить так:

.block1 {
    /* background: #323232; */
    /* z-index: 10; */
}

.block1::after {
    content: "";
    position: relative;
    display: block;
    height: 100%;
    background: #323232;
}

img {
    /* z-index: 1; */
}

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

Измененный пример: https://codepen.io/anon/pen/BrdYJQ

Answer 2

[Монти Пайтон]

background: url("1.jpg"), url(2.jpg);