本教程旨在解决自定义光标在网页中被固定定位（`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值为absolute或relative且z-index不为auto。
- position值为fixed或sticky。
- opacity小于1。
- transform、filter、perspective、will-change等属性。
当一个元素被设置为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核心概念对于构建复杂且交互性强的网页至关重要。
