I have a parent container who has two children, like so:

<div class='parent'>
   <span id='Span1' style='position: relative'>
   <span id='Span2'><span style='position: absolute'></span>
</div>

The first one is fixed, and the second one has absolutely positioned children. The reason is because it displays words from a list that are fading in and out, but those words overlap each other.
I would like to achieve something like the picture below, which is working great if both spans are relatively positioned.

Is this even possible?