Bring div to front in css

Question

I have 2 section header and main(red one). i set z-index to 100 and want to bring main section to front but it goes to back i want to know what cause this in css?

#red {
    margin-top: -10px;
    background-color: red;
    height: 100px;
    z-index: 100;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

    <header style="background-color: black;">
        <img class="img-fluid" src="https://via.placeholder.com/1000x100" />
    </header>

    <main id="red" role="main">        
      <div class="container">
          Red
      </div>
    </main>

demo in fiddle

position:relative to red section – Temani Afif Apr 12 '20 at 10:28 — Temani Afif, Apr 12 '20 at 10:28

score 1 · Answer 1 · answered Apr 12 '20 at 10:30

take a look at this link about z-index:

https://www.w3schools.com/cssref/pr_pos_z-index.asp

and note:

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

#red {
    margin-top: -10px;
    background-color: red;
    height: 100px;
    z-index: 10;
    position: absolute;
    width: 100vw;
}



.img-fluid {
    max-width: 100%;
    height: auto;
}

<header style="background-color: black;">
    <img class="img-fluid" src="https://via.placeholder.com/1000x100" />
</header>

<main id="red" role="main">
  <div class="container">
      Red
  </div>
</main>

The easiest way however is to move the html higher in the hierarchy to move something on top. then you will have to style position on margins and size.

Bring div to front in css

1 Answers1