Question

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

任何帮助将不胜感激

 <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

你使用z-index是对的。但z-index仅适用于位置为相对，绝对或固定的元素。

我已经设定：

.string {
  position: relative;
  z-index: 2;
}
.round-button {
  position: relative;
  z-index: 3;
}

并从.stringTitle中删除了z-index。

它有效 http://jsfiddle.net/LZxxB/2/

Answer 2

试试这个：在这里添加位置和z-index：

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

并删除z-index：

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

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

Answer 3

我的建议是不要触摸z-indexing;使用html的隐式层索引; 我认为它的行为使第一个子元素位于最顶层，最后一个元素位于最底层，然后利用嵌套。（我可以让它向后，可能是最后一个元素呈现在最顶层）

这在使用任何类型的定位时效果最佳，因为可以独立于任何z索引指定位置，并且如果需要，可以通过javascript操纵元素顺序。（假设你预计会使用JavaScript）

CSS：嵌套元素Z-Index问题

3 个答案: