How to manage Z-index with 4 layers in React?

Question

How would one go for setting up the z-index, so that the 4 layers are as follow:

1. background color
2. logoImg (png with opacity 00.7) (!)
3. circleImg (png)
4. coundownClock (text)

I tried changing z-index in every possible way, and I can not get that the 3. circleImg & 4. coundownClock overlap.

#1. background color & #2. logoImg are set correctly as background

TimerScreen.js:

 import React from 'react';
import UIfx from 'uifx';
import Logo from "../images/logo.png";
import Circle from "../images/circle.png";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";


class TimerScreen extends React.Component {

state = {
  minutes: 3,
  seconds: 0,
  reps: 3
}

  render() {

  const { minutes, seconds, reps } = this.state

      return (


    <div className="mainDiv" >

               <img
            className="logoImg"
            style={{
              width: "100%",
              opacity: "0.07",
                    position: "absolute",
                  zIndex: "-1"
                          }}
            src={Logo}
            alt="berolina-stralau logo"
        />             


          <div className="coundownClock">  { minutes < 10 ? `0${ minutes }` : minutes }:{ seconds < 10 ? `0${ seconds }` : seconds } </div>

          <img id="circleImg" src={Circle} />
          <div className="repetitionsCount"> <i>reps left: {reps}</i> </div>


            <div id="buttonDiv">
                                <Link to="/TimerScreen"
        className="goButton">PAUSE</Link>

        </div>
            <br />

        </div>

      );
    }

}
export default TimerScreen;

App.css part:

circleImg {
    width: 100%;
    margin-bottom: 40px;
    position: "absolute";
    z-index: "0";
}

.coundownClock {
    display: flex;
    justify-content: center;
    font-size: 111px;
    font-weight: bold;
    position: "relative";
    z-index: "1";
}

Full code on github.com FilipZafran/Interval-Timer

Answer 1

Definition from https://www.w3schools.com/cssref/pr_pos_z-index.asp :

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

So make sure your elements have a position and z-index to create the wanted order. If I understood you correctly that would be:

1. background color -> z-index: 0
2. logoImg (png with opacity 00.7) (:) -> z-index: 1
3. circleImg (png) -> z-index: 2
4. coundownClock (text) -> z-index: 3

background color is then in the back and coundownClock in the front

As an advice: It would be easier to wrap the elements you want to stack above each other in awhich has position: relative . Inside you put all the elements you want to stack with position: absolute and the z-index for creating your order