• HTML/CSS

    css3实现绝对定位元素的穿透

    by on 2011年06月17日

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>test</title>
<style>
.layer { width:1000px; height:500px; position:absolute; z-index:1; background:#ccc;opacity:0.5;pointer-events:none}
</style>
</head>
<body>
<div></div>
<div>
<a href=”#”>测试链接</a>
<input type=”checkbox” />
</div>
</body>
</html>

layer 是绝对定位覆盖在了另外1个div之上,默认情况下是点击不到被遮盖的东西的,但是通过css3的pointer-events:none 可以逆其道而行,允许穿透。