css - 如何显示嵌套列表，以便子列表按堆叠顺序显示在其父列表下方？

Question

这是一支供参考的笔： http: //codepen.io/anon/pen/blwCI

与父级相比，如何让嵌套列表在堆叠顺序中显示得更低？我尝试了 z-index 没有成功。

例如，设计要求“第四层”出现在“第三层”下方。

示例代码：

<ul class="firstLevel">
  <li>First Level
    <ul class="secondLevel">
      <li>Second Level
        <ul class="thirdLevel">
          <li>Third Level
            <ul class="fourthLevel">
              <li>Fourth Level</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 1

你不能。当您增加父级的 z-index 时，所有子级都会增加相同的数量。如果您尝试定位父母，同样的事情，孩子将与父母一起移动。您只能通过取消嵌套元素来做到这一点，但这可能也不是您想要的。

您可能需要添加一些额外的标记来放置您的视觉覆盖，而不改变列表的父子关系。例如;

      <li>Third Level
        <ul class="fourthLevel">
          <li>Fourth Level</li>
        </ul>
        <div style="position:absolute;top:0">I'M ON TOP OF FOUR</div>
      </li>