skip to Main Content

So, I have this thing where this image sits on top of anything, regardless of how much I alter the z-index. I want to make it so that the bluff tag sits on top of the .quoteicon, but no matter what I do it just doesn’t work. The little quotation mark I’ve put inside of it shows up, but the red background of it is hidden behind.

I want it to look like this (I had to do this in photoshop, just to explain what I want.):
http://i.gyazo.com/3eddbf25f79c97fb7d646d6050c1b23a.png

But it currently looks like this (You can see the little white quotation sitting in front of it.):
http://i.gyazo.com/0859417a1746ba934896dea46acc073d.png

The CSS:

.quotewrap{
margin-bottom:30px;
}

.quoteicon{
width:60px;
margin-bottom:-58px;
padding-right:5px;
border-right:5px #F0F0F0 solid;
z-index:998;
}

.quoteicon img{
border:5px solid white;
outline:1px solid #F4F4F4;
}

.bluff{
background-color:red;
text-shadow:1px 1px black;
height:34px;
width:34px;
color:white;
font-family:arial;
line-height:34px;
text-align:center;
font-size:20px;
margin-top:-10px;
z-index:999;
}

THE HTML:

        <div class="quotewrap">
    <div class="quoteicon">
    <img src="https://33.media.tumblr.com/avatar_d020f5726f28_48.png">
    </div>

   <div class="bluff">❝</div>

   </div>

2

Answers


  1. See this fiddle: http://fiddle.jshell.net/d3cosgc7/

    You have to understand the principles of position relative and position absolute.
    That will help you a lot.
    Take your time and go through the fiddle, if you have any questions, let me know.

    Cheers,

    Login or Signup to reply.
  2. z-index attribute works only for containers with position: relative|absolute|fixed;

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search