Z-index not working on image inside css shape [duplicate]

StackOverflow https://stackoverflow.com//questions/25002340

  •  20-12-2019
  •  | 
  •  

Question

I have the following scenario:

I have a css diamond shape like this: 

.diamond {
    border-style: solid;
    border-color: transparent transparent #9b59b6 transparent;
    border-width: 0 55px 60px 55px;
    height: 0;
    width: 300px;
    position: relative;
    margin: 20px 0 50px 0;
}
.diamond:after {
    content: "";
    position: absolute;
    top: 60px;
    left: -55px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #9b59b6 transparent transparent transparent;
    border-width: 150px 150px 0 150px;
}

Which results in a very nice diamond. Inside the diamond, I would like to put a picture that is small enough to fit inside it.

Here is the simple markup and the propper css class for the picture: 

.logo-sponsor{
  z-index: 1000;
  width: 250px; 
  height: auto;
  margin: 0 auto;
  display: block;
}

And the markup: 

<div class="diamond">
  <img src="http://www.userlogos.org/files/logos/jumpordie/tigo_01.png" class="logo-sponsor">
</div>

Everything seems to go ok until you preview it and you see half of the diamond on top of the picture. I thought a simple high z-index would fix the issue but it didn't. Any ideas on how can I make that diamond "go back" and bring the picture "to front"?

Here's a pen for you to experiment.

Was it helpful?

Solution

Add position: relative; to .logo-sponsor

http://codepen.io/TomSpeak/pen/DIJds

Is that what you're after?

The reason being, by default it is static, which ignores z-index.

Edit: Like TylerH says above, lots of good info here: How do I use the z-index properly?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top