element on top of parent's sibling - html

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

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

Answer 2

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;
}