Question

我有一个奇怪的问题，当我点击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>

enter image description here

Answer 1

当然因为“继承的使用”是唯一的链接元素（除了“什么是java”），它将被选中 - 没有别的选择！

尝试将该元素的显示设置为“无”时隐藏。

Answer 2

您可以尝试在内容面板上单击/拖动时挂钩事件，并在面板关闭时执行event.stopPropagation();或event.preventDefault();。据我所知，你可以看到coz Snap.js添加了相应的类，如（ class =“snapjs-right”或 class =“snapjs-left”）身体是为了表明面板是否打开。

首先，你必须检查一下。

使用jQuery，它看起来像这样：

$(document).ready(function() { 
    $("#UsesofInheritence_Anchor_ID").bind("click", function() {
        if (!($('body').hasClass("snapjs-right"))){
            event.stopPropagation();
            event.preventDefault();
        }
    });
});

触摸最上面的div选择它下面的div的内容 - z-index属性

2 个答案: