html – 点击图层/ div

如果我在一个页面上有两个层,可以分开,第二层与第一层重叠,可以让它“点击”吗？

我有第一层中的链接,第二层重叠,这阻止链接被点击.有没有办法使图层显示,但要点击,同时仍然有自己的链接可点击？

编辑：

这是一个例子,用html和样式表.

当与Layer3中的标题内联时,测试链接变得不可压缩,但在下面它们是正确的.有没有办法纠正这个？

<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%;
}

解决方法

如果您希望div保留在当前的x,y(最重要的是)z中,这是不可能的 – 只有“顶”层是可点击的.

附录帖子OP编辑：

想想CSS布局,就好像你正在使用一些纸张一样(如果你给所有的“layer”div)一个不同的背景颜色,这很容易可视化.渲染引擎在您找到的每个元素的尺寸上剪掉了一些纸张(或它的工作原理).它按照它遇到的顺序,将每一页纸放在页面上 – 最后一个项目将在顶部.

现在你已经告诉渲染引擎把你的第三个div放在了与第二个div重叠的位置.而现在,您希望能够“看到”涵盖的内容.不能使用纸张,不能使用HTML.因为它是透明的并不意味着它不占用空间.

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

看看你的CSS和标记(诚实地可以清理,但我会假设有其他的标记,你没有告诉我们哪些是正当的)有几个简单的胜利的方式：

1).在Layer3 – z-index上设置z的z-index是如何从默认(如遇到)更改分层顺序.这只是将Layer3的整体移动到页面的其余部分之下,所以隐藏的内容会暴露出来,反之亦然,这取决于内容.

2).将宽度从100％更改为例如. 80％,或更可能给你使用pos：abs设置left：0px和right：199px; (我猜,Layer2上的padding-left是一个预期的列宽？).这样做的代价是您的Layer3不再是100％的宽度

3). Google“CSS列布局”,并找到一个反映您需要并适应的模式.可以完成的每个CSS布局已经完成了一百万次.存在解决问题的标准技术.如果您没有建立体验,CSS就很难,所以利用他人的经验.不要重新发明轮子

html – 点击图层/ div

解决方法

相关推荐