CODEWITHSUNDEEP
htmlcss
lonewarrior556
lonewarrior556

Reputation: 4519

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

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.

Upvotes: 0

Views: 697

Answers (1)

connexo
connexo

Reputation: 56813

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>

Upvotes: 3

Related Questions