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

Question

How would one go for setting up the z-index, so that the 4 layers are as follow:
background color
logoImg (png with opacity 00.7) (!)
circleImg (png)
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:
background color -> z-index: 0
logoImg (png with opacity 00.7) (!) -> z-index: 1
circleImg (png) -> z-index: 2
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 a which has position: relative. Inside you put all the elements you want to stack with position: absolute and the z-index for creating your order