Why element with position absolute and z-index not working?-CodePudding

I don't understand, why element "preloader-two" appears above "preloader-one", when "preloader-one" has a higher index than "preloader-two" What may be the problem?

.preloader-one,
.preloader-two {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.preloader-one {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.preloader-two {
    background-color: #000;
    z-index: 999;
}

<body>
   <div >
        <img>
   </div>
   <div ></div>
</body>

CodePudding user response：

In this simple mockup, .preloader-one shows above .preloader-two, but you have to give it a background color to make it visible.

.preloader-one,
.preloader-two {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.preloader-one {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background-color: #f00;
}

.preloader-two {
    background-color: #000;
    z-index: 999;
}

<div >One</div>
<div >Two</div>