Search code examples
htmlcssangularz-index

z-index block in reverse order

I've gone through a lot of pages on z-index. This example SHOULD show the brown list of numbers on TOP (higher z-index?) than the blue box of text. enter image description here

The CSS is in the HTML here for easy debugging:

My understanding is that as long as the two blocks are positioned and NOT positioned STATIC, then the one with the higher z-index (brown box) should show on top.

Thoughts?

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

  • the ul and li are at z-index 2 but their div container does not have any z-index => in order to have your unordered list on top, you should put a z-index in the parent div as this :

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