title: How to manage Z-index with 4 layers in React?
body: <p>How would one go for setting up the z-index, so that the 4 layers are as follow:</p>
  
  <ol>
  <li>background color</li>
  <li>logoImg (png with opacity 00.7) (!)</li>
  <li>circleImg (png)</li>
  <li>coundownClock (text)</li>
  </ol>
  
  <p>I tried changing z-index in every possible way, and I can not get that the  3. circleImg &amp;  4. coundownClock overlap.</p>
  
  <p>#1. background color &amp;  #2. logoImg are set correctly as background</p>
  
  <p>TimerScreen.js:</p>
  
  <pre><code> 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 (
  
  
      &lt;div className="mainDiv" &gt;
  
                 &lt;img
              className="logoImg"
              style={{
                width: "100%",
                opacity: "0.07",
                      position: "absolute",
                    zIndex: "-1"
                            }}
              src={Logo}
              alt="berolina-stralau logo"
          /&gt;             
  
  
            &lt;div className="coundownClock"&gt;  { minutes &lt; 10 ? `0${ minutes }` : minutes }:{ seconds &lt; 10 ? `0${ seconds }` : seconds } &lt;/div&gt;
  
            &lt;img id="circleImg" src={Circle} /&gt;
            &lt;div className="repetitionsCount"&gt; &lt;i&gt;reps left: {reps}&lt;/i&gt; &lt;/div&gt;
  
  
              &lt;div id="buttonDiv"&gt;
                                  &lt;Link to="/TimerScreen"
          className="goButton"&gt;PAUSE&lt;/Link&gt;
  
          &lt;/div&gt;
              &lt;br /&gt;
  
          &lt;/div&gt;
  
        );
      }
  
  }
  export default TimerScreen;
  </code></pre>
  
  <p>App.css part:</p>
  
  <pre><code>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";
  }
  </code></pre>
  
  <p>Full code on github.com FilipZafran/Interval-Timer</p>