CSS 动画与文字重叠

Question

（我不是英语，希望你能理解。）

你好，我需要动画 div 不与文本重叠。

<span>TEXT</span>
<div></div>

div {
   width: 10000px;
   height: 10000px;
   background: red;
   animation: div 5s linear infinite;
   position:relative;
}

@keyframes div{
   0%   {top: 0%; left: 0%;}
   50%   {top: 0%; left: 100%;}
   100% {top: 0%; left: 0%;}
}

span {
   font-size:50px;
   position:absolute;
}

感谢安德鲁的回答

Answer 1

如果您希望文本悬停在 div 上，您可以在文本元素上设置比 div 更大的 z-index。

div { z-index: 1 }

span { z-index: 2 }

Answer 2

在CSS中对span使用z-index，有助于指定元素或图层的堆叠顺序。

代码示例：

span {
   font-size:50px;
   position:absolute;
   z-index:1;
}

完整代码：

div {
   width: 10000px;
   height: 10000px;
   background: red;
   animation: div 5s linear infinite;
   position:relative;
}

@keyframes div{
   0%   {top: 0%; left: 0%;}
   50%   {top: 0%; left: 100%;}
   100% {top: 0%; left: 0%;}
}

span {
   font-size:50px;
   position:absolute;
   z-index:1;
}

<span>TEXT</span>
<div></div>

CSS 动画与文字重叠

CSS Animation overlaps the text

html

css

animation

layer