Why does a background with a lower z index show on top? - html

Question

I have two overlapping backgrounds with absolute positioning and I'm trying to styling them such that they overlap and one is on top of the other. This is the CSS I wrote so far.
.answered {
position: absolute;
top: 0;
}
.asked {
position: absolute;
top: 0;
}
h1{
display: block;
position: relative;
width: 120px;
border-radius: 5px 5px 0px 0px;
border: 1px solid black;
}
.in-back {
display: block;
background: grey;
z-index: -1;
}
.in-front {
display: block;
z-index: 1;
background: tan;
}
<section class="history">
<div class="asked">
<h1 class="user-show-tab-title in-front">Questions</h1>
<div>
<ul class="question-index-false in-front">
<li>
<a class="question" href="http://localhost:3000/#questions/1">what train runs faster from wycoff?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/5">What is the history of the Block Island Ferry?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/78">What are the major human features in New York City?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/199">How much do greyhound bus tickets from California to Phoenix Arizona?</a>
</li>
</ul>
</div>
</div>
<div class="answered">
<h1 class="user-show-tab-title in-back">Answers</h1>
<div>
<ul class="question-index-false in-back">
<li>
<a class="question" href="http://localhost:3000/#questions/129">What is the state bird of New York?</a>
</li>
</ul>
</div>
</div>
</section>
The grey keeps appearing on top of the tan even though its z-index is lower. I don't understand why.

Answer 1

The elements are not positioned absolute, only their parents .asked and .answered. The position property is not inherited by child elements. Both <ul> have the default position: static; which is always applied unless you specify a different value for the position property. So adding position: relative; makes your z-index way work the way you expect.
.answered {
position: absolute;
top: 0;
}
.asked {
position: absolute;
top: 0;
}
h1 {
display: block;
position: relative;
width: 120px;
border-radius: 5px 5px 0px 0px;
border: 1px solid black;
}
.in-back {
display: block;
background: grey;
position: relative;
z-index: -1;
}
.in-front {
display: block;
z-index: 1;
position: relative;
background: tan;
}
<section class="history">
<div class="asked">
<h1 class="user-show-tab-title in-front">Questions</h1>
<div>
<ul class="question-index-false in-front">
<li>
<a class="question" href="http://localhost:3000/#questions/1">what train runs faster from wycoff?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/5">What is the history of the Block Island Ferry?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/78">What are the major human features in New York City?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/199">How much do greyhound bus tickets from California to Phoenix Arizona?</a>
</li>
</ul>
</div>
</div>
<div class="answered">
<h1 class="user-show-tab-title in-back">Answers</h1>
<div>
<ul class="question-index-false in-back">
<li>
<a class="question" href="http://localhost:3000/#questions/129">What is the state bird of New York?</a>
</li>
</ul>
</div>
</div>
</section>