CSS: Nested Element Z-Index Issue - html

Question

I'm trying to get the horizontal grey lines to sit in front of the red background but behind the blue buttons. I've tried using z-index but I think it fails because the nested divs need to be placed in front of a div outside their containers.
Any help would be appreciated
http://jsfiddle.net/LZxxB/1/
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div role="main" class="ui-content" id="contentDiv">
<div class="fretboardWrapper">
<div class="strings">
<div class="string" id="stringHighE"></div>
<div class="string" id="stringB"></div>
<div class="string" id="stringG"></div>
<div class="string" id="stringD"></div>
<div class="string" id="stringA"></div>
<div class="string" id="stringLowE"></div>
</div>
<div class="stringTitle">
<div class="noteClickArea stringTitleContainerE1">
<div class="round-button" id="noteHigh0"> <span class="note">E</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerB">
<div class="round-button" id="noteB0"> <span class="note">B</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerG">
<div class="round-button" id="noteG0"> <span class="note">G</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerD">
<div class="round-button" id="noteD0"> <span class="note">D</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerA">
<div class="round-button" id="noteA0"> <span class="note">A</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerE2">
<div class="round-button" id="noteLowE0"> <span class="note">E</span>
</div>
</div>
</div>
<div class="stringTitle">
<div class="noteClickArea stringTitleContainerE1">
<div class="round-button" id="noteHigh0"> <span class="note">E</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerB">
<div class="round-button" id="noteB0"> <span class="note">B</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerG">
<div class="round-button" id="noteG0"> <span class="note">G</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerD">
<div class="round-button" id="noteD0"> <span class="note">D</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerA">
<div class="round-button" id="noteA0"> <span class="note">A</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerE2">
<div class="round-button" id="noteLowE0"> <span class="note">E</span>
</div>
</div>
</div>
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->

Answer 1

You were right to use z-index. But z-index only works for elements with position: relative, absolute or fixed.
I've set:
.string {
position: relative;
z-index: 2;
}
.round-button {
position: relative;
z-index: 3;
}
And removed the z-index from .stringTitle.
And it works
http://jsfiddle.net/LZxxB/2/

Answer 2

try this:
add position and z-index here:
.noteClickArea {
height:16.66%;
z-index:2;
position:relative;
}
and remove z-index here:
.stringTitle {
z-index:1; // REMOVE IT
}
see results here: http://jsfiddle.net/LZxxB/4/

Answer 3

My advice is to not touch z-indexing; Use html's implicit layer indexing;
I believe it behaves such that the first child element is topmost and the last element is bottom most, then leverage nesting. (I could have it backwards, it might be that the last element is rendered topmost)
This works best for be when using any sort of positioning, as the position can be specified independent of any z indexing, and element order can be manipulated by javascript if need be. (Assuming you anticipate using JavaScript at all)