CSS: Nested Element Z-Index Issue

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

Chris Wesseling · Accepted Answer · 2014-03-31 08:42:01Z

2

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/

edited Mar 31, 2014 at 8:42

answered Mar 31, 2014 at 0:10

Chris Wesseling

6,3962 gold badges39 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dima · Accepted Answer · 2014-03-31 00:10:06Z

1

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/

answered Mar 31, 2014 at 0:10

dima

1,1891 gold badge9 silver badges20 bronze badges

Comments

ThorSummoner · Accepted Answer · 2014-03-31 00:47:25Z

1

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)

answered Mar 31, 2014 at 0:47

ThorSummoner

18.6k18 gold badges144 silver badges156 bronze badges

2 Comments

totalitarian Over a year ago

Can you provide a JSFiddle example based on the one I posted in the question. I'd be interested to see a version without z-index

ThorSummoner Over a year ago

Sure, But I probably won't have any free time to tinker most weekdays, at the latest I'll get cha' something targeted by the weekend!

Collectives™ on Stack Overflow

CSS: Nested Element Z-Index Issue

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related