0

参照用のペンは次のとおりです。 http://codepen.io/anon/pen/blwCI

ネストされたリストをその親と比較して積み上げ順序で低く表示するにはどうすればよいですか? z-index を試しましたが成功しませんでした。

たとえば、ある設計では、「第 3 レベル」の下に「第 4 レベル」を表示する必要があります。

サンプルコード:

<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 に答える