本教程旨在解决自定义光标在网页中被固定定位（`position: fixed`）元素（如导航栏、bootstrap组件）遮挡的问题。通过深入理解css的层叠上下文（stacking context）和`z-index`属性，我们将演示如何为自定义光标设置合适的`z-index`值，确保其始终显示在页面最前端，提供流畅的用户体验。文章将提供详细的代码示例和实现步骤，帮助开发者有效管理页面元素的层叠顺序。
在现代网页设计中，为了提升用户界面的交互性和视觉吸引力，自定义光标（Custom Cursor）变得越来越流行。然而，开发者在实现自定义光标时，常会遇到一个普遍问题：当页面中存在使用position: fixed属性的元素（如固定导航栏、弹窗、bootstrap组件等）时，自定义光标可能会被这些元素遮挡，导致用户体验受损。这种现象通常是由于css的层叠上下文（Stacking Context）和z-index属性管理不当所引起的。
理解层叠上下文与 z-index
要解决光标被遮挡的问题，首先需要理解CSS中的层叠上下文（Stacking Context）和z-index属性。
- z-index：此CSS属性用于指定定位元素及其子元素的层叠顺序。拥有更高z-index值的元素会显示在拥有较低z-index值的元素之上。z-index仅对定位元素（position属性值为relative, absolute, fixed, 或 sticky）有效。
- 层叠上下文（Stacking Context）：层叠上下文是html元素的三维概念，它决定了元素在Z轴上的渲染顺序。当一个元素创建了一个新的层叠上下文时，它的所有子元素都将在这个新的上下文中进行层叠排序，而不会与外部的元素直接比较z-index。常见的创建层叠上下文的属性包括：
当一个元素被设置为position: fixed时，它会自动创建一个新的层叠上下文。这意味着，即使其他元素的z-index值很高，如果它们不在同一个层叠上下文中，或者固定定位元素的层叠上下文更高，固定定位元素仍然可能覆盖它们。自定义光标通常也采用position: fixed来保持相对于视口的位置，因此，它们之间的层叠顺序需要通过z-index来明确控制。
自定义光标的实现基础
以下是典型的自定义光标实现代码，包括HTML结构、CSS样式和javaScript逻辑：
index.html
<div class="cursor"></div> <div class="cursor2"></div> <nav class="navbar navbar-expand-lg navbar-light p-4 fixed-top"> <div class="container-fluid"> <!-- 导航栏内容 --> <div class="row d-flex justify-content-center mb-5 px-3 support_return_payment_secure_container"> <!-- Bootstrap 5 卡片示例 --> <div class="col-10 col-md-4 col-lg-3 col-xxl-2 d-flex justify-content-center support_return_payment_secure_card py-3 mx-1 my-1"> <div class="support_return_payment_secure_icon_container"> <div class=""><i class="fas fa-user-headset "></i></div> </div> </div> <!-- 其他卡片或按钮 --> </div> </div> </nav>style.css
/* 自定义光标样式 */ .cursor { width: 50px; height: 50px; border-radius: 100%; border: 1px solid #0AD8C7; transition: all 200ms ease-out; position: fixed; pointer-events: none; left: 0; top: 0; transform: translate(calc(-50% + 15px), -50%); /* 调整光标中心点 */ box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; animation: cursorAnim1 .5s infinite alternate; } .cursor2 { width: 20px; height: 20px; border-radius: 100%; background-color: gainsboro; border: 1px solid #008F84; opacity: .3; position: fixed; transform: translate(-50%, -50%); /* 居中光标 */ pointer-events: none; transition: width .3s, height .3s, opacity .3s; animation: CursorAnim2 .5s infinite alternate; } /* 导航栏样式，这里仅为示例，实际可能来自Bootstrap */ .navbar { /* ... 其他导航栏样式 ... */ position: fixed; /* 关键属性 */ top: 0; width: 100%; /* 默认 z-index 可能不足 */ /* background-color: white; */ }cursor.js
var cursor = document.querySelector('.cursor'); var cursorinner = document.querySelector('.cursor2'); document.addEventListener('mousemove', function(e){ // 更新外层光标位置 cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`; }); document.addEventListener('mousemove', function(e){ // 更新内层光标位置 cursorinner.style.left = e.clientX + 'px'; cursorinner.style.top = e.clientY + 'px'; }); // 实际项目中可能还有鼠标悬停交互等逻辑在上述代码中，nav元素使用了fixed-top类，这通常意味着它被设置为position: fixed。当其z-index没有明确设置，或者设置的值低于自定义光标时，光标就会被遮挡。
解决方案：设置高 z-index
解决此问题的核心在于为自定义光标元素设置一个足够高的z-index值，以确保它们始终位于所有其他页面元素之上。
在style.css中，我们需要对.cursor和.cursor2这两个自定义光标的CSS规则进行修改，添加z-index属性：
.cursor { /* ... 现有样式 ... */ position: fixed; pointer-events: none; z-index: 2000; /* 确保光标在最上层 */ } .cursor2 { /* ... 现有样式 ... */ position: fixed; pointer-events: none; z-index: 2000; /* 确保光标在最上层 */ }将z-index设置为2000（或者任何一个比页面中其他固定定位或高z-index元素更大的值，例如9999）后，自定义光标将能够正确地显示在导航栏、卡片以及其他任何固定定位的元素之上。
关键注意事项
- z-index值选择：选择一个足够大的z-index值至关重要。常见的UI框架（如Bootstrap）的固定导航栏或模态框通常会使用z-index: 1030到1050左右。因此，将自定义光标的z-index设置为2000或更高，可以有效避免冲突。
- position: fixed：自定义光标元素必须使用position: fixed，这样它们才能相对于视口定位，并跟随鼠标移动而不会受页面滚动影响。同时，z-index属性也只对定位元素生效。
- pointer-events: none;：此属性对于自定义光标至关重要。它确保光标元素本身不会捕获鼠标事件，从而允许用户能够与光标下方的实际页面元素进行交互（例如点击按钮、链接等）。如果缺少此属性，自定义光标可能会阻碍用户与页面的正常交互。
- 性能优化：自定义光标通常涉及javascript监听mousemove事件以频繁更新光标位置。为了优化性能，可以使用requestAnimationFrame来节流更新，避免在短时间内触发过多重绘。
- 无障碍性（accessibility）：在实现自定义光标时，应考虑无障碍性。确保自定义光标足够明显，并且不会分散用户的注意力。对于某些用户，系统默认光标可能更易于识别和使用。
总结
自定义光标被固定定位元素遮挡的问题，本质上是CSS层叠上下文和z-index属性管理不当的结果。通过为自定义光标元素明确设置一个足够高的z-index值，并结合position: fixed和pointer-events: none，可以确保光标始终显示在页面最前端，提供流畅且一致的用户体验。在实际开发中，理解这些CSS核心概念对于构建复杂且交互性强的网页至关重要。