反应：具有4层的Z索引

Question

如何设置z-index，以便4层如下：

1. 背景色
2. logoImg（png具有不透明度00.7）（！）
3. circleImg（png）
4. coundownClock（文本）

我试图以各种可能的方式更改z-index，但我无法理解3. circleImg和4. coundownClock重叠。

＃1。背景颜色＆＃2。 logoImg正确设置为背景

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部分：

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";
}

.repetitionsCount {
    display: flex;
    justify-content: center;
    font-size: 33px;
    font-weight: italic;
    z-index: "1";
}

github.com FilipZafran / Interval-Timer上的完整代码

Answer 1

https://www.w3schools.com/cssref/pr_pos_z-index.asp中的定义：

z-index属性指定元素的堆栈顺序。

具有较高堆叠顺序的元素始终位于元素前面 具有较低的堆叠顺序。

注意：z-index仅适用于定位的元素（position：绝对， 位置：相对，位置：固定或位置：粘性）。

因此请确保您的元素具有位置和z-index以创建所需的订单。如果我对您的理解正确，那将是：

1. 背景色-> z-index：0
2. logoImg（png不透明度为00.7）（！）-> z-index：1
3. circleImg（png）-> z-index：2
4. coundownClock（文本）-> z-index：3

然后背景颜色在后面，coundownClock在前面