本文旨在解决CSS伪元素（如`::before`或`::after`）因定位问题导致遮挡页面元素，使其无法响应点击事件的问题。我们将深入探讨`z-index`属性如何控制元素的堆叠顺序，并提供具体的代码示例，帮助开发者有效地解决此类问题，确保页面的交互功能正常运行。
在使用CSS创建页面效果时，我们经常会用到伪元素，比如在body元素前添加一个全屏的背景覆盖层。然而，这种做法有时会导致页面上的按钮或其他可交互元素无法点击，这是因为伪元素覆盖在了这些元素之上。解决这个问题，关键在于理解CSS的堆叠上下文和z-index属性。
理解堆叠上下文和 z-index
在HTML中，元素按照它们在文档中出现的顺序进行堆叠。但是，通过CSS的position属性（如relative、absolute、fixed、sticky）和z-index属性，我们可以改变这种默认的堆叠顺序。
z-index属性用于指定一个元素及其子元素的堆叠顺序。一个较大的z-index值意味着该元素会堆叠在具有较低z-index值的元素之上。
立即学习“前端免费学习笔记（深入）”；
注意： z-index只有在position属性值为relative、absolute、fixed或sticky的元素上才有效。
解决伪元素遮挡问题
当一个position: fixed的伪元素覆盖了页面上的其他元素时，它会阻止这些元素接收点击事件。为了解决这个问题，我们可以使用z-index将伪元素放置在其他元素之下。
以下是一个示例，展示了如何使用z-index解决伪元素遮挡问题：
HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- 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>CSS:
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。这会将伪元素放置在所有其他元素的下方，从而允许用户点击按钮和复选框等元素。
其他注意事项
- 确保父元素没有设置overflow: hidden： 如果父元素设置了overflow: hidden，那么z-index可能无法正常工作。
- 检查堆叠上下文： z-index只在其所在的堆叠上下文中有效。如果元素位于不同的堆叠上下文中，它们的z-index值将不会相互影响。可以通过创建新的堆叠上下文（例如，通过设置position: relative和z-index: 0）来解决这个问题。
- 避免过度使用z-index： 过度使用z-index可能会导致代码难以维护。尽量保持堆叠顺序的简单和可预测性。
总结
通过合理使用z-index属性，我们可以有效地控制元素的堆叠顺序，解决伪元素遮挡点击事件的问题。在编写CSS时，理解堆叠上下文的概念至关重要，它可以帮助我们更好地管理页面的布局和交互。记住，z-index是一个强大的工具，但需要谨慎使用，以避免产生不必要的复杂性。
