Question

如果我在一个页面上有两个图层，并且第二层与第一个图层的一部分重叠，那么它是否可以“点击”？

我在第一层中有链接，第二层重叠，这会阻止链接被点击。有没有办法让图层显示，但是点击，同时仍然可以点击它自己的链接？

编辑：

这是一个使用html和样式表的例子。

当与第3层中的标题内联时，测试链接变得不可点击，但在下面它们没问题。有没有办法纠正这个问题？

<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
<body>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div id="Layer2" class="Layer2"><h1>TEST</h1>
<div id="rightlayer">
<a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p>
</div>
</div>
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1>
</div>
</div>
</body>
</html>

和css

#Layer0 {
    width:100%;
    height:100%;
}
body {
    margin:10px 10px 0px 10px;
    padding:0px;
    color:#999999;
    font-family:"Trebuchet MS",arial,sans-serif;
    font-size:70.5%;
}
#Layer1 {
    position:absolute;
    left:10px;
    width:200px;
    margin-top:17px;
    font-size:1.0em;
    padding-left:12px;
    padding-top:8px;
}
#Layer2 {
    background:#fff;
    margin-left:199px;
    color:#000;
}

#rightlayer {
float:right;
}
.Layer3 {
position:absolute;
top:67%;
padding:20px;
width: 100%;
}

Answer 1

以为我会更新这个，因为我几个小时都在努力，并且认为我找到了解决方案。看看使用Jquery但CSS属性：

pointer-events:none;

......完全按照自己的意愿行事。

Answer 2

如果您希望div保持在当前的x，y，（最重要的是）z，则不可能 - 只有“top”图层可以点击。

OP编辑附录：

将CSS布局想象为您正在使用一些纸张（如果您为所有“图层”div提供不同的背景颜色，则更容易可视化）。渲染引擎会为您找到的每个元素剪切出一些纸张（或者它可以解决）。它按照它遇到的顺序执行此操作，将每一页纸放在页面上 - 最后一项将位于顶部。

现在你已经告诉渲染引擎将你的第3个div放在与第2个重叠的位置。现在，您希望能够“看到”涵盖的内容。不适用于纸张，不适用于HTML。仅仅因为它透明并不意味着它没有占用空间。

所以你必须改变一些东西。

看看你的CSS和标记（老实说可以清理，但我会假设还有其他标记，你没有向我们展示哪种方法可以证明这一点），有几个简单的胜利方式：

1）。 在Layer3上设置-1的z-index - z-index是如何从默认值（遇到）更改分层顺序的方法。这只会将整个Layer3移动到页面的其余部分下方，这样隐藏的内容就会暴露出来，反之亦然，具体取决于内容。

2）。 将宽度从100％更改为80％，或者更有可能给你使用pos：abs set left：0px and right：199px; （我猜测Layer2上的填充左边是一个预期的列宽？）。这样做的代价是你的Layer3不再是100％宽度

3）。 Google“CSS列布局”，找到一种反映您需要的模式并进行调整。每个可以完成的CSS布局已经完成了一百万次。存在解决您的问题的标准技术。如果你没有积累经验，CSS很难，所以利用他人的经验。不要重新发明轮子。

Answer 3

这将是一项庞大的工作，但这是可能的您需要捕获顶层/ div上的click事件，并找到光标x-y位置然后找到顶层下面的图层/ div中的所有链接，看看它在屏幕上的位置是否落在当前鼠标位置附近。
然后，您可以触发匹配链接的单击如果遇到麻烦，我会使用jQuery（如果你还没有），然后使用jQuery标签重新发布。

Answer 4

没有看到一些代码就很难分辨。

您可以尝试在底层设置z-index，但这适用于已使用绝对，相对或固定（位置：绝对）定位的元素。

看到代码后编辑：

添加位置：相对;的z-index：100;到#rightLayer。

或者你可以从.Layer3中删除宽度：100％。

您可能想要重构代码，并为#rightLayer和.Layer3采用两列布局。

CSS

#Layer0 {
    width:100%;
    height:100%;
}
body {
    margin:10px 10px 0px 10px;
    padding:0px;
    color:#999999;
    font-family:"Trebuchet MS",arial,sans-serif;
    font-size:70.5%;
}
#Layer1 {
    width:200px;
    margin-top:17px;
    font-size:1.0em;
    padding-left:12px;
    padding-top:8px;
}
#Layer2 {
    background:#fff;
    margin-left:199px;
    color:#000;
}

#rightlayer {
float:right;
}
.Layer3 {
}

HTML

<div id="Layer0">
    <div id="Layer2" class="Layer2">
        <h1>TEST</h1>
    </div>
    <div id="Layer1" class="Layer1">
        <h3 align="left">Brands</h3>
    </div>
    <div class="content">
        <div id="rightlayer">
            <a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p>
        </div>
        <div id="Layer3" class="Layer3">
            <h1>Ed Hardy Auctions</h1>
        </div>
    </div>
</div>

Answer 5

我假设从示例中，右侧层中的链接是唯一需要单击的链接，并且您在其他层中没有链接。如果是这样，您可以通过更改div的z-index顺序来解决问题。

Layer1和Layer3具有绝对位置，因此如果向Layer2添加位置样式（绝对或相对），您将能够将该div拉到前面，同时将右层div拉到比Layer3更高的层中

我在CSS中添加了以下内容：

#Layer2 {    
    position: relative;
    z-index: 1;
}

从我所看到的，当前页面设置就像它一样，但是将所有元素（包括带有链接的右层）拉到前面，这样你就可以点击它中的所有链接

出于调试目的，我建议将背景颜色添加到所有不同的层，以了解不同层的z-index顺序。在背景颜色到位的情况下，很容易发现掉落在链接上的图层，但也要验证新的z-index顺序是否可以使链接可用。

希望这有帮助！

Answer 6

我几年前向Firefox Bugzilla提交了一个错误，说Firefox中存在这个错误。

Mozilla工程师告诉我，这实际上并不是一个错误，而且根据HTML / CSS规范它是正确的行为。不幸的是，我找不到原始的bug，因为它是在大约6年前。

我提交错误的原因是因为我可以在使用IE时点击顶部div到下面的链接（我认为6）但Firefox不会让我。

与往常一样，事实证明，IE的实施方式不正确，Firefox正按照规范的意图运作。

仅仅因为div是透明的并不意味着你应该能够点击它。

我不确定如何使用JavaScript或CSS解决这个问题。我会退后一步，重新考虑一下你想要达到的目标以及你是如何努力实现它的。

格雷格

Answer 7

你能不能简单地将div的宽度设置为auto（绝对定位的默认值 - 即只删除宽度：.Layer3的100％）。

这样，div只会在必要时加宽，而不是不必要地重叠链接。

单击图层/ div

7 个答案: