html - z-index block 倒序

Question

我浏览了很多关于 z-index 的页面。这个例子应该在顶部显示棕色的数字列表(更高的 z-index？)而不是蓝色的文本框。

CSS 在此处的 HTML 中以便于调试:

我的理解是，只要两个 block 被定位而不是静态定位，那么具有较高 z-index 的那个(棕色框)应该显示在顶部。

想法？

<div [ngStyle]="{'display': 'flex', 'flex-direction': 'row', 'height': '50px', 'width': '100%', 'border': '1px solid maroon', 'position': 'absolute', 'position-top': '0', 'position-left': '0'}">
  <div [ngStyle]="{'flex-direction': 'column'}">
    <div>Overview</div>
    <div [ngStyle]="{'z-index': '2', 'width': '50px', 'border': '1px solid green', 'background-color': 'wheat'}">
      <ul [ngStyle]="{'z-index': '2'}">
        <li [ngStyle]="{'z-index': '2'}">1</li>
        <li [ngStyle]="{'z-index': '2'}">2</li>
        <li [ngStyle]="{'z-index': '2'}">3</li>
        <li [ngStyle]="{'z-index': '2'}">4</li>
        <li [ngStyle]="{'z-index': '2'}">5</li>
        <li [ngStyle]="{'z-index': '2'}">6</li>
        <li [ngStyle]="{'z-index': '2'}">7</li>
      </ul>
    </div>
  </div>
</div>

<div [ngStyle]="{'position': 'relative', 'top': '55px', 'width': '100px', 'height': '80px', 'margin-left':'15px', 'background-color': 'lightblue', 'z-index': '1'}">
  BLOCK OF TEXT HERE SHOWS THROUGH
</div>

Answer 1

ul 和 li 的 z-index 为 2，但它们的 div 容器没有任何 z-index => 为了让无序列表位于顶部，您应该在父 div 中放置一个 z-index，如下所示:

    <div [ngStyle]="{'z-index':'2','display': 'flex', 'flex-direction': 'row', 'height': '50px', 'width': '100%', 'border': '1px solid maroon', 'position': 'absolute', 'position-top': '0', 'position-left': '0'}">
      <div [ngStyle]="{'flex-direction': 'column'}">
        <div>Overview</div>
           ...