按钮hover时波纹遮挡文本？设置z-index仍无效的技术求助

问题核心是文本span没有设置position属性——z-index仅在元素position为relative/absolute/fixed/sticky时才会生效，你给span加的z-index:10根本没起作用，而波纹元素是absolute定位，默认会处于普通流元素（span默认是static）的上方。

修改方案： #

给文本span添加position: relative，同时把内联样式移到CSS里更便于维护：

修改后的CSS

.login {
    position: relative;
    border: rgb(0, 175, 175) 1px solid;
    background-color: white;
    border-radius: 20px;
    height: 30px;
    color: rgb(0, 175, 175);
    overflow: hidden;
    display: flex; /* 补上这个才能让align-items:center生效 */
    align-items: center;
    justify-content: center; /* 让文本水平居中 */
}

.login-text {
    position: relative;
    z-index: 10;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(1);
    background-color: rgb(0, 175, 175);
    z-index: 0;
    width: 29px;
    height: 29px;
    left: -30px;
    top: 0;
    bottom: 0;
    transition: transform ease 1s;
}

.login:hover .ripple {
    transform: scale(20);
    width: 20px;
    height: 20px;
}

.login:hover{
    color: white;
}

修改后的HTML

<button class="login">
    <span class="login-text"> my button </span>
    <div class="ripple"></div>
</button>

额外优化说明： #

1. 给.login加上display: flex，否则align-items:center不会生效，文本无法垂直居中
2. hover状态下的.ripple无需重复写position、border-radius等默认样式里已有的属性，只保留变化的属性即可
3. 波纹z-index设为0，文本span的z-index设为10，加上position后层级关系生效，波纹会被压在文本下方

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