我试图使水平的灰色线位于红色背景的前面,但位于蓝色按钮的后面。我已经尝试过使用z-index,但是我认为它失败了,因为嵌套的div需要放在容器外部的div前面。

任何帮助,将不胜感激

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

最佳答案

尝试这个:
在此处添加位置和z-index:

.noteClickArea {
  height:16.66%;
  z-index:2;
  position:relative;
}


并在此处删除z-index:

.stringTitle {
  z-index:1; // REMOVE IT
}


在此处查看结果:http://jsfiddle.net/LZxxB/4/

关于html - CSS:嵌套元素Z索引问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22751499/

10-08 22:41
查看更多