z-index 块倒序

Question

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

CSS在HTML这里方便调试：

我的理解是，只要两个块是定位的而不是静态定位的，那么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 => 为了让无序列表位于顶部，您应该将 z-index 放入父 div 是这样的：

    <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>
           ...

z-index 块倒序

z-index block in reverse order

html

css

z-index

angular