I have a parent container who has two children, like so:
<div class='parent'>
<span id='Span1' style='position: relative'>Some content that is fixed</span>
<span id='Span2'><span style='position: absolute'><span>Some content that is fading in and out</span></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 example (REPL).
I would like to achieve something like the picture below, which is working great if both spans are relatively positioned.
Is this even possible?
2
Answers
I hope I understood you correctly. Have you tried getting something like this?:
Positioning the children of the second span seems a little like overkill.
Perhaps a pseudo-element would be a better option and does not require positioning since it would adapt to its own content, and wrap as it’s "inside" a
span
.I have omitted any fading animation but this can easily be added to the animation.