Hide Part Of Moving Text Under Other Elements

Question

This Is My First Question On This Website So I Don't Know If I Implemented The Format Correctly.. So Incase this Post Is Missing Something Crucial Which is Necessary Please Tell Me At The Comments.
Here Below Is My Code

#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>

Whenever I Run This Code The Update Contents(recupd) After Moving Goes Below The Recent Updates Element(rectitle)(CSS Implementation Of Marquee Tag) but it doesn't get hidden but instead in a weird way gets overlapped over each other. Instead of that I want the part of moving text which goes below the Title to get hidden.
I Tried To Use A Method Similar To This Click Here But It doesn't seem to work.
I Also Tried Making The Title Element Opaque and also tried to use Div Instead Of Span But That Makes The Moving Text Go Below The Line Which I Don't Want To Happen
So I Need Help In Making It Such That Whenever Some Part Of Text Going Below The Title It Isnt Visible To User Even Though it Exists And Rest Of The Text Still Intact.

I Tried Using Z Index As In The Code I Gave to the Title(As 2) .. But Still It gets Overlapped. — mrtechtroid, Feb 08 '21 at 16:32
`z-index` does not work on elements unless you set the `position` attribute to something other than the default `static` value. — Liftoff, Feb 08 '21 at 16:33

score 2 · Accepted Answer · answered Feb 08 '21 at 16:32

Just set the position property of the #rectitle span to relative. The z-index property is only effective on positioned elements:

#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>

score 1 · Answer 2 · answered Feb 08 '21 at 16:33

By applying a position: relative; and z-index: 1 to the #rectitle span you can place it higher in the vertical stack and position it over the scrolling text:

#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; position:relative; z-index:1;">Recent Updates:</span>
        <span id = "recupd">Some Random Recent Update</a></span>
    </b>
</div>

Hide Part Of Moving Text Under Other Elements

2 Answers2