Canvas设为absolute后按钮动画失效的解决求助

问题根源 #

1. Canvas层级遮挡：absolute定位的Canvas默认层级高于静态定位的按钮容器，导致鼠标无法触发按钮的hover事件，动画自然不生效。
2. CSS选择器语法错误：.button:span是无效写法，正确的子元素选择器应为.button span，错误写法会导致按钮文字的z-index设置不生效，即使hover触发也看不到效果。

修复方案 #

1. 修正CSS选择器错误 #

把原CSS中的错误选择器：

.button:span{
    position: absolute;
    z-index: 1;
}

改为：

.button span{
    position: absolute;
    z-index: 1;
}

2. 调整Canvas层级，避免遮挡交互 #

给Canvas添加z-index: -1，让它作为背景处于所有内容下方：

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; /* 新增：将Canvas置于内容底层 */
}

3. 可选优化：调整容器布局 #

原代码中.header的margin-bottom: 800px会导致布局偏移，建议改用flex布局属性控制位置，比如给body设置flex-direction: column，再通过gap调整间距，避免固定大值margin带来的适配问题。

修正后的完整CSS代码 #

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

h1 {
    color: #f5d442;
    font-family: 'Righteous', sans-serif;
    font-size: 40px;
    margin-left: 50px;
}

.header {
    display: flex;
    align-items: center;
    gap: 400px;
    margin-bottom: 20px;
}

.button{
    font-family: 'Abril Fatface', serif;
    font-size: 20px;
    text-decoration: none;
    color: #ffffff;
    margin-right: 60px;
    position: relative;
    display: inline-flex;
    padding: 10px 30px;
    background: #363636;
    letter-spacing: 1px;
    overflow: hidden;
}

.button span{
    position: absolute;
    z-index: 1;
}
.button::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2196f3;
    transition: width 0.5s,height 0.5s;
}

.button:hover::before{
    width: 300px;
    height: 300px;
}

说明 #

• 添加z-index: -1后，Canvas作为背景不会遮挡任何交互元素，按钮的hover动画可正常触发。
• 修正选择器后，按钮文字层级高于动画背景，确保hover时文字不会被蓝色圆形覆盖。

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