Should the Z index Have Worked Here?


Where is the rest of my yellow rectangle and why doesn’t the
z-index = 2 bring it to the foreground?

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Positioning - relative, absolute, fixed, float</title>
    <style>
        .red {
            width: 50%;
            height: 20%;
            background: red;
            position: fixed;
            top: 170px;
            left: 38px;
        }

        .blue {
            width: 5%;
            height: 12%;
            background: blue;
            position: fixed;
            top: 170px;
            right: 843px;

        }
        a   {
            position: absolute;
            top: 100px;
            z-index: ;
        }
        .quiz {
            position: absolute;
            left: 500px;
        }
        ul  {
            display:block;
            position: relative;
        }
        .yellow {
            width: 210px;
            height: 210px;
            background: rgb(247, 243, 12);
            z-index: 2;
        }
    </style>
</head>

<body>
    <h1>Get the tools you need to succeed </h1>
    <p>Responsible self-directed investing can dramatically increase your overall level of investing knowledge and
        seriously <br> cut down the fees you would otherwise pay to a robo-advisor or full-service broker, thus
        increasing
        your overall return on investment. </p>
    <ul>
        <a href="https://yukon.ca/en/covid-19-information">Yukon Covid
        </a>
        <a class="quiz"
            href="https://www.nytimes.com/interactive/2020/01/03/briefing/iraq-carlos-ghosn-vaping-news-quiz.html">New
            York Quiz
        </a>
        <div class="red"></div>
        <div class="blue"></div>
        <div class="yellow"></div>
    </ul>
</body>

add a value here to z-index it may be causing issues

if that will not make it work add an higher value of the z-index

z-index does not apply to objects with static (default) positioning. If you add position: absolute or fixed to the yellow box, it will work.

As said, anything other than the default static position will work.



In this case, as long as .red does not have a z-index simply setting .yellow to any position that creates a new stacking context will put the .yellow element on top of the .red element.

.yellow {
  position: relative;
  width: 210px;
  height: 210px;
  background: rgb(247, 243, 12);
}

In fact, anything that creates a new stacking context will.

.yellow {
  width: 210px;
  height: 210px;
  background: rgb(247, 243, 12);
  /* new stacking context */
  opacity: 0.99999;
}

Thanks to all for setting me straight on the subtleties of layers and positioning.