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>