z-index not working on list elements? - html

Question

http://jsfiddle.net/ineomod/8NeyY/embedded/result/
HTML:
<section id="diamonds">
<ul>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/geak_zps76747320.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
"Geak" Interactive Magazine
</span>
</div>
</li>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/pink_zps8d76dfad.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
"Pink" Magazine
</span>
</div>
</li>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/f3_zps57ac8198.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
F3 "Celebrate In Style" Ad Campaign
</span>
</div>
</li>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/sgx_zps3a7e98c2.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
SGX Infographic
</span>
</div>
</li>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/namecard_zps6a64c3f5.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
m:idea Namecards
</span>
</div>
</li>
</ul>
CSS:
In the fiddle
I have this diamond gallery laid out as a list. There's a caption for each item. Hoever, I can't seem to use z-index to ensure that the caption stays above all the other li elements? It seems to be covered only by li elements that come after it.

Answer 1

Try giving
#diamonds li:hover {
position: relative;
z-index: 1;
}
This will bring the only that <li> at top which is :hover
Demo

Answer 2

Demo
It seems that you need to update z-index on every li element from higher to lower as follows
<li style="z-index: 4;">....</li>
<li style="z-index: 3;">....</li>
<li style="z-index: 2;">....</li>
<li style="z-index: 1;">....</li>
<li style="z-index: 0;">....</li>
here style inline tag is used only for demo purpose which is calculated by using jQuery