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-index较低，灰色仍会出现在棕褐色的顶部。我不明白为什么。

Answer 1

元素不位于绝对位置，只有父级 .asked和.answered。子元素不继承position属性。 <ul>都有默认position: static;，除非您为position属性指定不同的值，否则始终会应用默认值position: relative;。因此，添加.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; }会使您的z-index方式按预期方式工作。

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

unsigned

为什么z索引较低的背景显示在顶部？

1 个答案: