element on top of parent's sibling

Question

I am trying to get an element to appear on top of its parent's sibling but it only appears underneath. I have tried changing the z-index and playing around with floats but can't find a working solution. I want to keep the Stuff span inside its parent span as it is related to it and works well if CSS is disabled.

He is what I have so far http://jsfiddle.net/P3qwx/

HTML

<div class="grid">
    <span>
        <h4>1</h4>
    </span>
    <span>
        <h4>2</h4>
        <span>Stuff</span>
    </span>
    <span>
        <h4>3</h4>
    </span>
    <span>
        <h4>4</h4>
    </span>
</div>

CSS

.grid > span {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    z-index: 5;
}

.grid > span > span {
    background-color: #ff00ff;
    display: inline-block;
    width: 250px;
    z-index: 10;
}

This is what I get (FF30)

This is what I want

Answer 1

Pradeep Pansari's answer is all good but I would like to explain a little bit more thus provide another solution to your question.

First of all, your z-index code doesn't work at all. z-index only has an effect if an element is positioned.

Now, let's add the position. Your css is now

.grid > span {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    z-index: 5;
    position:relative;
}

.grid > span > span {
    background-color: #ff00ff;
    display: inline-block;
    width: 250px;
    z-index: 10;
    position:absolute;
}

This is the result http://jsfiddle.net/P3qwx/4/

What's happening here? Why is the purple block is still hidden under the third and fourth yellow blocks?

This is because for each yellow block, there is a stacking context created

So long story short, your purple block and its z-index only takes effect under the second yellow block, it has no power whatsoever under the third and fourth one because of different stacking context. Here's the hierarchy

• Yellow block 1 (z-index 5)
• Yellow block 2 (z-index 5)
  • Purple block (z-index 10)
• Yellow block 3 (z-index 5)
• Yellow block 4 (z-index 5)

Once we got to this point, fixing is simple, either removing the z-index and setting the position to absolute and let the default stacking rule takes care of business

Demo

.grid > span {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
}

.grid > span > span {
    background-color: #ff00ff;
    display: inline-block;
    width: 250px;
    position:absolute;

}

Or (I suppose you don't want this but just for for completeness sake..)

Demo

HTML

<div class="grid">
    <span class="span1">
        <h4>1</h4>
    </span>
    <span class="span2">
        <h4>2</h4>
        <span class="span5">Stuff</span>
    </span>
    <span class="span3">
        <h4>3</h4>

    </span>
    <span class="span4">
        <h4>4</h4>

    </span>
</div>

CSS

.span1 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 1;
}
.span2 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 5;
}
.span3 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 3;
}
.span4 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 4;
}

.span5  {
    background-color: #ff00ff;
    display: inline-block;
    width: 250px;
    position:absolute;
    z-index:1;    
}

Answer 2

You can try this:

Demo

.grid > span > span {
  background-color: #ff00ff;
  display: inline-block;
  width: 250px;
  z-index: 10;
  position:absolute;

 }