在前端开发中，经常会遇到 div 元素重叠的情况。但是有时候我们希望下面的内容仍然可以被访问，尤其是在一些弹出框或者浮动菜单的情况下。
本文将介绍如何使用 CSS 将重叠的 div 元素设置为“不可点击”，以便用户可以访问底部的内容。以下是具体步骤：
1. 添加 z-index 属性
要解决这个问题，我们需要先了解 CSS 中的 z-index 属性。它定义了元素的堆叠顺序，并显示哪个元素位于哪个元素的前面。默认情况下，元素的 z-index 值为 0。
要使一个 div 元素不可点击，可以将其 z-index 设置为负数。这样，这个元素就会被放置在其他元素的下面，并且不会阻止用户访问底部的内容。
例如，我们可以创建两个 div 元素，一个用于显示菜单，另一个用于显示主要内容。我们希望菜单不可点击，因此将其 z-index 设置为 -1。
<div class="menu"></div> <div class="content"></div>
-- -------------------- ---- ------- ----- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- -------- --- - -------- - --------- --------- -------- -- -
在上面的示例中，菜单 div 元素的 z-index 值为 -1，而内容 div 元素的 z-index 值为 1。这将使内容 div 元素出现在菜单下方，并且用户可以访问它。
2. 避免使用 click 事件
即使您已经将重叠的 div 元素设置为不可点击，如果在上面添加了 click 事件，则仍然会阻止用户访问底部的内容。因此，避免在不可点击的元素上添加 click 事件是很重要的。
例如，如果您有一个弹出框，您可以使用 jQuery 的 on() 方法来添加一个 click 事件。但是，由于我们希望弹出框不可点击，因此应该在另一个元素上添加 click 事件，并使用 jQuery 的 stopPropagation() 方法来阻止事件冒泡。
<div class="wrapper"> <div class="popup"></div> <div class="content"></div> </div>
-- -------------------- ---- ------- -------- - --------- --------- - ------ - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -------- -- - -------- - --------- --------- -------- -- -
$('.wrapper').on('click', function() {
// 阻止事件冒泡
event.stopPropagation();
});在上面的示例中，我们在 .wrapper 元素上添加了 click 事件，并使用 stopPropagation() 方法阻止事件冒泡。这样，即使用户单击弹出框，也不会影响下面的内容。
总结
本文介绍了如何使用 CSS 和 JavaScript 将重叠的 div 元素设置为“不可点击”，以便用户可以访问底部的内容。要实现这一点，您需要将不可点击元素的 z-index 设置为负数，并避免在其上添加 click 事件。
虽然这个问题看起来很简单，但它通常涉及到很多细节和技巧。如果您熟练掌握了这些技术，您
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30992