如果我在一个页面上有两个图层,并且第二层与第一层重叠,那么它是否可以"点击"？
我在第一层中有链接,第二层重叠,这使链接无法点击.有没有办法让图层显示,但是点击,同时仍然可以点击自己的链接？
编辑:
这是一个例子,带有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%;
}
DrS*_*oon 28
以为我会更新这个,因为我几个小时都在苦苦思索,并且认为我找到了解决方案.看看使用Jquery但CSS属性:
pointer-events:none;
......完全按照我的意愿行事.
如果你希望div保持在当前的x,y,(最重要的是)z,那是不可能的 - 只有"top"图层是可点击的.
附录后OP编辑:
想想CSS布局就好像你正在使用一些纸张一样(如果你给所有的"图层"div赋予不同的背景颜色,这更容易可视化).渲染引擎会为您找到的每个元素剪切出一些纸张(或者它可以解决).它按照它遇到的顺序执行此操作,将每一页纸放在页面上 - 最后一项将位于顶部.
现在你已经告诉渲染引擎将你的第3个div放在与第2个div重叠的位置.现在,您希望能够"看到"涵盖的内容.不适用于纸张,不适用于HTML.仅仅因为它透明并不意味着它不占用空间.
所以你必须改变一些东西.
看看你的CSS和标记(真的可以清理,但我会假设还有其他标记,你没有向我们展示哪种方法可以证明),有几个简单的胜利方式:
1).在Layer3上设置 -1 的z-index - z-index是如何从默认值(遇到)更改分层顺序的方法.这只是将整个Layer3移动到页面的其余部分之下,因此隐藏的内容会被暴露,反之亦然,具体取决于内容.
2).将宽度从100%更改为例如80%,或更可能使用pos:abs set left:0px和right:199px; (我猜测Layer2上的填充左边是一个预期的列宽？).这样做的代价是你的Layer3不再是100%的宽度
3).谷歌"CSS列布局",找到一个反映你需要和适应的模式.每个可以完成的CSS布局已经完成了一百万次.存在解决您的问题的标准技术.如果你没有积累经验,CSS很难,所以利用他人的经验.不要重新发明轮子.