Почему фон с более низким индексом z отображается сверху?

Question

У меня есть два перекрывающих друг друга фонов с абсолютным позиционированием, и я пытаюсь имитировать их так, что они перекрываются, а один поверх другого. Это CSS, который я написал до сих пор.

.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>

серый продолжает появляться на вершине загар, даже если его Z-показатель ниже. Я не понимаю, почему.

Answer 1

элементы являются не расположены абсолют, только их родителей.asked и .answered. Свойство position не наследуется дочерними элементами. Оба <ul> имеют значение по умолчанию position: static;, которое всегда применяется, если вы не указали другое значение для свойства position. Поэтому добавление position: relative; делает ваш способ z-index работать так, как вы ожидаете.

.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>