z-index块以相反的顺序排列

Question

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

CSS在HTML中，以便于调试：

我的理解是，只要两个块定位并且没有定位STATIC，那么具有较高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 =＆gt;为了让您的无序列表位于顶部，您应该在父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>
           ...