0

这是一支供参考的笔: 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>
4

1 回答 1

3

你不能。当您增加父级的 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>
于 2013-11-15T02:09:45.760 回答