不过我有一个奇怪的问题,当我单击 z-index 20 的内容时,z-index 1 的内容会在我的手机中被选中。
该图像有两个屏幕截图 - 图像右侧的部分仅用于说明我的问题,因此白色灰色 div 位于我的内容 div 后面。
有人可以救救吗。
相关的 CSS 文件:
#content {
background: #000000;
background: url(../img/WireFrame_test.png) center center no-repeat;
box-shadow: 0 0 15px 15px #222222;
overflow-x: hidden;
z-index: 20;
}
.snapjs-right .snap-drawer-right {
display: block;
z-index: 10;
}
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
z-index: 1;
}
根据要求的相关 HTML 脚本:
<body>
<div class="snap-drawers" id="leftid">
...
<div class="snap-drawer snap-drawer-right overthrow">
<div>
<h3>Questions</h3>
<div class="demo-social">
</div>
<h4>Java</h4>
<ul>
<li><a href="noDrag.html">What is Java?</a></li>
<li><a href="noDrag.html">Uses of Inheritence?</a></li>
...
</div>
</div>
<div id="content" class="snap-content">
my content goes here
</div>
</div>
</body>