CODEWITHSUNDEEP
htmlcsscss-positionabsolute
Moon Rat
Moon Rat

Reputation: 25

Wrapping an absolutely positioned span after a relatively positioned one

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.

Span1 position is relative, Span2 position is absolute.

Is this even possible?

Upvotes: -1

Views: 73

Answers (2)

Paulie_D
Paulie_D

Reputation: 114979

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.

.parent {
  width: 250px;
  padding: .25em;
  border: 2px solid blue;
}

span {
  outline: 1px solid grey;
}

.fixed {
  background: lightblue;
  margin-right: .25em;
}

.vary {
  background: orange;
}

.vary:before {
  content: "";
  animation: texty 5s infinite;
}

@keyframes texty {
  0%,
  32% {
    content: "Something short"
  }
  33%,
  65% {
    content: "Something a little longer"
  }
  66%,
  100% {
    content: "Something much longer and required reading"
  }
}
<div class="parent">
  <span class="fixed">Some content that is fixed</span>
  <span class="vary"></span>
</div>

Upvotes: 0

Agota Kristof
Agota Kristof

Reputation: 560

I hope I understood you correctly. Have you tried getting something like this?:

.parent {
    position: relative;
}

#Span1 {
    position: relative;
    background-color:blue;
    border:1px black solid;

}

#Span2 {
    position: relative; /* or absolute, depending on your layout */
    background-color:blue;
    border:1px black solid;

}

.fading-content {
    position: absolute;
    opacity: 0;
    animation: fade 6s infinite;
    background-color:red;
    border:1px black solid;

}

.fading-content:nth-child(1) {
    animation-delay: 0s;
}

.fading-content:nth-child(2) {
    animation-delay: 2s;
}

.fading-content:nth-child(3) {
    animation-delay: 4s;
}

@keyframes fade {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}
<div class='parent'>
   <span id='Span1'>Fixed content</span>
   <span id='Span2'>
       <span class='fading-content'>Dynamic content 1</span>
       <span class='fading-content'>Dynamic content 2</span>
       <span class='fading-content'>Dynamic content 3</span>
   </span>
</div>

Upvotes: -2

Related Questions