在使用CSS伪元素（如`::before`或`::after`）创建覆盖层时，可能会遇到伪元素遮挡下方元素，导致无法点击的问题。本文将详细介绍如何解决这个问题，通过调整`z-index`属性，确保伪元素在视觉上呈现为背景，同时不影响用户与页面元素的交互。
问题分析
当使用position: fixed的伪元素覆盖整个页面时，它会位于其他元素之上，阻止用户与下方元素的交互。这是因为position: fixed会改变元素的堆叠顺序（stacking order）。
解决方案：使用 z-index 属性
解决此问题的关键在于使用 z-index 属性来控制元素的堆叠顺序。z-index 属性指定了一个元素及其子元素的层叠顺序。当元素发生层叠时，z-index 较大的元素会覆盖 z-index 较小的元素。
为了使伪元素不遮挡下方元素，可以将其 z-index 设置为一个负值，例如 -1。这样，伪元素就会被放置在默认堆叠顺序的下方，从而允许用户与页面上的其他元素进行交互。
立即学习“前端免费学习笔记（深入）”；
示例代码
以下代码展示了如何使用 z-index 来解决伪元素遮挡点击事件的问题：
html,
body {
margin: 0;
padding: 0 0 0 0;
}
body:before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
box-shadow: inset 0 0 100px 20px #14BD63;
z-index: -1; /* 将伪元素放置在底层 */
}在这个例子中，我们将 body::before 伪元素的 z-index 设置为 -1。这样，即使伪元素覆盖了整个页面，它也不会阻止用户点击页面上的按钮或其他交互元素。
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-index Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
html,
body {
margin: 0;
padding: 0 0 0 0;
}
body:before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
box-shadow: inset 0 0 100px 20px #14BD63;
z-index: -1;
}
</style>
</head>
<body>
<!-- Wrapper container -->
<div class="container py-4">
<!-- Bootstrap 5 starter form -->
<form id="contactForm">
<div class="row">
<div class="col text-center my-auto">
<button type="button" class="btn btn-outline-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="fa fa-calendar"></span> Cohort Year
</button>
<ul id="ddCohort" class="dropdown-menu csr_lnk" >
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2026" value="2026" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2026" class="d-inline input small dropdownLabel_NormalFont">2026</label></li>
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2025" value="2025" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2025" class="d-inline input small dropdownLabel_NormalFont">2025</label></li>
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2024" value="2024" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2024" class="d-inline input small dropdownLabel_NormalFont">2024</label></li>
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2023" value="2023" checked="" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2023" class="d-inline input small dropdownLabel_NormalFont">2023</label></li>
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2022" value="2022" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2022" class="d-inline input small dropdownLabel_NormalFont">2022</label></li>
</ul>
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>注意事项
- position 属性： z-index 只有在元素的 position 属性设置为 relative、absolute、fixed 或 sticky 时才生效。如果元素的 position 属性为 static（默认值），则 z-index 不起作用。
- 堆叠上下文： z-index 的效果受到堆叠上下文的影响。堆叠上下文是由设置了 position 属性（除了 static）且 z-index 值不为 auto 的元素创建的。在一个堆叠上下文中，z-index 值只相对于该上下文中的其他元素有效。
- 父元素的影响： 子元素的 z-index 值不能使其超出父元素的堆叠上下文。如果父元素的 z-index 值较低，即使子元素的 z-index 值很高，子元素也无法覆盖父元素之上的元素。
总结
通过合理使用 z-index 属性，可以有效地控制CSS伪元素的堆叠顺序，避免遮挡页面上的其他元素，从而确保用户能够正常地与页面进行交互。记住，理解 z-index、position 属性以及堆叠上下文的概念是解决此类问题的关键。
