Block with z-index goes beyond the background, what's the problem?

Question

css

Tell me if it's not difficult, what is the problem. I really don't understand how z-index works. There is a block with a background, there is another block in it, which is set to position: relative and z-index: 10;. In this block, the picture, which is set to position: absolute; and z-index: 1; I need half of this picture to be behind the block.
I read several articles on the z-index account, and according to the plan, everything should work, but nothing works. I played with numbers in different ways, and set minuses and pluses and percentages. And I saw at least some movement when I asked the parent z-index: 10%; and child z-index: -1; Although I didn’t read about percentages anywhere, at least it somehow worked. But when you set -1 then the picture becomes the background. In short, I don't know what to do anymore. Help ))
Here is the code https://codepen.io/rebrikover/pen/JLyMpp

Answer 1

The problem is that a child element cannot have a z-index less than the parent element, as in your case.
You can implement it in different ways, depending on what and how else you want to place there. Alternatively, change it like this:

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

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

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

Please note that these are not final styles, but only what should be added or removed. Or, if you don’t want to do ::after , you can instead add an element for layout after the image and apply similar styles to it.
Modified example: https://codepen.io/anon/pen/BrdYJQ

Answer 2

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