如果我在一个页面上有两个层,可以分开,第二层与第一层重叠,可以让它“点击”吗？
我有第一层中的链接,第二层重叠,这阻止链接被点击.有没有办法使图层显示,但要点击,同时仍然有自己的链接可点击？
编辑：
这是一个例子,用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就很难,所以利用他人的经验.不要重新发明轮子
