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>