Hey there, check out my HTML snippet below:
<body>
<div class="relative1">
<div class="fixed1"> </div>
</div>
<div class="relative2"> </div>
</body>
Here's the corresponding CSS:
.relative1 {
left: 0px;
top: 0px;
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 1;
}
.fixed1 {
width: 100px;
height: 100px;
left: 20px;
top: 20px;
background-color: green;
position: fixed;
z-index: 2;
}
.relative2 {
width: 100px;
height: 100px;
left: 30px;
top: -80px;
background-color: blue;
position: relative;
z-index: 1;
}
Check out an example here.
I've noticed that my div.fixed1 isn't covering everything as intended, as div.relative2 is overlapping it. Is there a way to fix this without modifying the CSS for .relative1 and .relative2?