本文主要是介绍div重叠问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近要做一个在视频前面加一个蒙版。然后在视频上进行一些鼠标操作。
单独的在视频上面点击鼠标，视频会暂停等等。不想让这些事件触发，就在视频的前面加一个透明的div，然后在这个div上进行鼠标的操作，这样就能解决问题。
视频叠加代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div重叠 叠加实例 未排层叠顺序</title> <style> .div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px} .div-a{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px} /* 视频加载 */ .div-b{ position:absolute; left:80px; top:80px; opacity:0.6; width:300px; height:300px} /* DIV透明 */ </style> </head> <body> <span style="color:#ff0000;"> <div class="div-relative"> <div <span style="font-size: 13.3333px; font-family: Arial, Helvetica, sans-serif;">id="video" </span><span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> class="div-a">加载视频</div> </span></span><div class="div-b">鼠标事件</div> </div> </body> </html> 最开始我想就直接在这最下面的div上加上视频，然后把上面的div改为透明。然并卵！！！！
解决办法很简单，在后面的div再嵌一层div。把视频加载到这个div就可以
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div重叠 叠加实例 未排层叠顺序</title> <pre name="code" class="html" style="font-size: 13.3333px;"><style> .div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px} .div-a{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px} /* 视频加载 */ .div-b{ position:absolute; left:80px; top:80px; opacity:0.6; width:300px; height:300px} /* DIV透明 */ </style> </head> <body> <div class="div-relative"> <div class="div-a"><div id="video"> 加载视频</div></div> <div class="div-b">鼠标事件</div> </div></body></html>这篇关于div重叠问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
