时间戳

首页 > 解决方案 > 在其他元素下隐藏部分移动文本

html - 在其他元素下隐藏部分移动文本

问题描述

这是我在这个网站上的第一个问题，所以我不知道我是否正确实施了格式。所以如果这篇文章缺少一些必要的关键信息，请在评论中告诉我。
下面是我的代码 

#recupd {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 10s linear infinite;
        }
        @keyframes marquee {
            0%   { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
        }
<div style = "overflow: hidden;white-space: nowrap;box-sizing: border-box;">
    <b>
        <span id = "rectitle" style = "color:darkred;z-index: 2;background-color: cyan;">Recent Updates:</span>
        <span id = "recupd">Some Random Recent Update</a></span>
    </b>
</div>
每当我运行此代码时，移动后的更新内容（recupd）会低于最近的更新元素（rectitle）（选取框标记的 CSS 实现），但它并没有被隐藏，而是以一种奇怪的方式相互重叠。相反，我希望隐藏标题下方的移动文本部分。
我尝试使用与此类似的方法单击此处，但它似乎不起作用。
我还尝试使标题元素不透明并且还尝试使用 Div 而不是 Span 但这会使移动的文本低于我不希望发生的行
，所以我需要帮助使其每当文本的某些部分发生时在标题下方，即使它存在并且文本的其余部分仍然完好无损，用户也看不到它。

标签： htmlcss

解决方案

只需将span的position属性设置为. 该属性仅对定位元素有效：#rectitlerelativez-index

#recupd {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}

#rectitle {
  position: relative;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
<div style="overflow: hidden;white-space: nowrap;box-sizing: border-box;">
  <b>
        <span id = "rectitle" style = "color:darkred;z-index: 2;background-color: cyan;">Recent Updates:</span>
        <span id = "recupd">Some Random Recent Update</a></span>
    </b>
</div>

推荐阅读