CSS如何调整元素层级 让td内容显示在动画边框容器上层

你遇到的内容遮挡是CSS层叠规则的默认表现导致的：.containere的::after伪元素设置了绝对定位且未指定z-index，默认渲染层级高于容器内未设置定位的普通流内容，直接盖住了内部的加密货币汇率组件，和你之前调整的td宽度属性没有关系。

直接替换原有.containere相关的CSS代码即可，不需要修改HTML结构：

/* containere */
.containere{
    width: 300px;
    border-radius: 20px;
    height: 190px;
    background: #1e1e1e;    
    display: grid;
    justify-content: center;
    align-content: center;
    position: relative;
    overflow: hidden;
}
.containere span{
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    font-family: Consolas, monaco, monospace;
    z-index: 3;
}
.containere::before{
    content: '';
    position: absolute;
    width: 40px;
    height: 300px;
    left: 75px;
    top: -100px;
    background: linear-gradient(#FFFF00, #0033FF);
    animation: animate 2s linear infinite;
    z-index: 1;
}
.containere::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: #29303f;
    border-radius: 18px;
    z-index: 2;
}
/* 新增规则：让容器内所有实际内容显示在最上层 */
.containere > * {
    position: relative;
    z-index: 3;
}

修改后三层元素的渲染顺序从下到上为：

• 最底层（z-index:1）：::before生成的渐变动画光带，实现边框流动效果
• 中间层（z-index:2）：::after生成的深色内容背景，留出5px的边框位置展示下层光带动画
• 最上层（z-index:3）：所有实际业务内容，包括加密货币汇率组件、文字链接，不会被伪元素遮挡

注意：z-index属性只对设置了非static定位的元素生效，因此给内容子元素添加position: relative是必要配置，不会影响原有元素的布局位置。

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