CODEWITHSUNDEEP
css
OdieO
OdieO

Reputation: 6994

Can't get div to overlay on top of other div

Here's my HTML:

<div class="image-container" >    
  <div class="image-overlay">
     dsfsadfdsafjhjkdhfkjashflksadhjfklasdjhfklsjdkfhasdjkhfsjkhdjkfs
  </div>                                  
  <div class="img-user">
    <img src="/images/flandre.jpg" width="220" />
  </div> 
</div>

And the CSS:

.image-container {
    position: relative;    
}

.img-user, .img-overlay {
    position: absolute; 
    top: 0;
    left: 0;
}

.img-overlay {
    position: absolute; 
    z-index: 10;
}

But <div class="image-overlay"> appears underneath <div class="img-user">.

I'm trying to follow the example in the top answer of this question, and it seems like I'm doing everything similar, but it's not working.

Upvotes: 0

Views: 90

Answers (1)

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

You have a typo in your classes.

You're writing img-overlay in your css.

You're using image-overlay in your html.

Upvotes: 3

Related Questions