我试图使水平的灰色线位于红色背景的前面,但位于蓝色按钮的后面。我已经尝试过使用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/