0

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.

Community
  • 1
  • 1
OdieO
  • 6,836
  • 7
  • 56
  • 88

1 Answers1

3

You have a typo in your classes.

You're writing img-overlay in your css.

You're using image-overlay in your html.

Mathias Rechtzigel
  • 3,596
  • 1
  • 18
  • 37