CODEWITHSUNDEEP
htmlcss
totalitarian
totalitarian

Reputation: 3666

CSS: Nested Element Z-Index Issue

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

Upvotes: 0

Views: 101

Answers (3)

Chris Wesseling
Chris Wesseling

Reputation: 6368

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/

Upvotes: 2

ThorSummoner
ThorSummoner

Reputation: 18109

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)

Upvotes: 1

dima
dima

Reputation: 1189

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/

Upvotes: 1

Related Questions