图一未解决刺穿问题: 图二已解决
![](https://images0.cnblogs.com/blog/318255/201312/26164330-7bf63e74b0af4b6b8a09904fc7281f20.jpg)
![](https://images0.cnblogs.com/blog/318255/201312/26164421-bf3a9f8c43d74ba1a13bb56652f22ad9.jpg)
解决方法使用iframe间接挡住层,具体方法见源码
源码一(未解决刺穿):
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/CSS"> #warp { position:absolute; top:10px; left:26px; width:200px; height:200px;} .box { position:absolute; top:0; left:0; width:200px; height:200px; background:#FDF3D9; border:1px solid #EEAC53} .box iframe {width:400px; height:400px; z-index:-1} </style> </head> <body> <DIV id="warp"> <iframe frameborder="0"></iframe> <DIV class="box">dfsagdsa</DIV> </DIV> <form id="form1" name="form1" method="post" action=""> <label> <select name="select" id="select"> <option>测试选项</option> <option>测试选项2</option> <option>测试选项3</option> </select> </label> </form> </body> </html>
源码2(已解决刺穿问题)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/CSS"> #warp { position:absolute; top:10px; left:26px; width:200px; height:200px;} .box { position:absolute; top:0; left:0; width:200px; height:200px; background:#FDF3D9; border:1px solid #EEAC53} </style> </head> <body> <DIV id="warp"> <DIV class="box">dfsagdsa</DIV> </DIV> <form id="form1" name="form1" method="post" action=""> <label> <select name="select" id="select"> <option>测试选项</option> <option>测试选项2</option> <option>测试选项3</option> </select> </label> </form> </body> </html>
若有问题请留言!!