自定义光标被fixed导航栏、Bootstrap卡片遮挡的问题及解决方法

问题描述 #

我已实现自定义光标，但设置nav{position: fixed}后，光标会被导航栏遮挡至其后方；Bootstrap 5卡片及按钮也存在相同问题，请分析原因并提供对应解决方案。

原因分析 #

• CSS层级优先级问题：fixed定位的导航栏、Bootstrap卡片/按钮默认拥有比自定义光标更高的层级，或是因为DOM渲染顺序（导航栏在光标元素之后），导致这些组件覆盖了光标。
• 自定义光标虽为fixed定位，但未显式设置z-index，浏览器会按照默认规则分配层级，无法超过其他fixed/relative定位的组件。

解决方案 #

给自定义光标元素设置足够高的z-index值，确保它能覆盖所有页面元素，同时保留pointer-events: none属性（避免光标阻挡其他元素的点击交互）。

修改后的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;
    z-index: 99999; /* 添加足够高的层级值 */
}  
.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;
    z-index: 99999; /* 添加足够高的层级值 */
}  

说明 #

• z-index: 99999是一个足够高的数值，能覆盖绝大多数页面组件的层级（Bootstrap默认组件的z-index一般不会超过1000）。
• 必须保留pointer-events: none，否则自定义光标会拦截鼠标事件，导致导航栏、按钮等元素无法被点击。

完整代码示例 #

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 card -->
        <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>
</nav>

cursor.js（无需修改） #

var cursor = document.querySelector('.cursor');  
var cursorinner = document.querySelector('.cursor2');  
var a = document.querySelectorAll('a');  
document.addEventListener('mousemove', function(e){  
    var x = e.clientX;  
    var y = e.clientY;  
    cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`  
});  
document.addEventListener('mousemove', function(e){  
    var x = e.clientX;  
    var y = e.clientY;  
    cursorinner.style.left = x + 'px';  
    cursorinner.style.top = y + 'px';  
}); 

内容的提问来源于stack exchange，提问作者Mossaddak