CODEWITHSUNDEEP
htmlcssz-index
Josh J
Josh J

Reputation: 71

z-index not working as expected for multiple items

How can I get a div to appear above another div even if it appears before it in the HTML.

If you look at the example below We would need the logo div to appear at the very front. 

div
{
    height: 200px;
    width: 200px;
    background: #0f0;
}

.parent
{
    position: relative;
    z-index: 1;
}

.child
{
    position: fixed;
    z-index: 2;
    top: 70px; 
    left: 30px;
    background: #f00;
    height: 60px;
}


.child-2
{
    position: inherit;
    z-index: 6;
    top: 10px; 
    left: 30px;
    background: blue;
     height: 60px;
}
<div class="parent">
    header background repeated image
    <div class="child-2">
      logo
    </div>
</div>

<div class="child">
  hero image
</div>

Upvotes: 1

Views: 148

Answers (1)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

You don't need to give z-index to other blocks Just give it to logo and it will be fine.

div {
  height: 200px;
  width: 200px;
  background: #0f0;
}

.parent {
  position: relative;
}

.child {
  position: fixed;
  top: 70px;
  left: 30px;
  background: #f00;
  height: 60px;
}

.child-2 {
  position: inherit;
  z-index: 16;
  top: 10px;
  left: 30px;
  background: blue;
  height: 60px;
}
<div class="parent">
  header background repeated image
  <div class="child-2">
    logo
  </div>
</div>

<div class="child">
  hero image
</div>

Upvotes: 1

Related Questions