Infinite bubble loop with CSS and set z-index

Question

I have a problem, when infinite my bubble the text always in front of bubble. Here is my code

.main {
  background: green;
  width: 400px;
  height: 200px;
  position: relative;
}

.bubble {
    position:absolute;
    animation-duration: 2.5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    white-space: nowrap;
}

.bubble_text {
    background: yellow;
    padding: 8px;
    position: relative;
}

@keyframes slidein {
    from {
      bottom: 8px;
      right: 36px;
      width: 0;
    }
  
    to {
      bottom: 8px;
      right: 28px;
      width: 160px;
    }
  }

<div class="main">
  <div class="bubble">
    <div class="bubble_text">Hello world hello</div>
  </div>
</div>

how to solve the bubble (yellow color) so that its position is fixed when infinite from keyframes. and the text can be in the back position when the bubble closes?

Answer 1

Let's see if I got this right from your question... If so, a simple overflow: hidden on the .bubble element should do the trick.

.main {
  background: green;
  width: 400px;
  height: 200px;
  position: relative;
}

.bubble {
    position:absolute;
    animation-duration: 2.5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    white-space: nowrap;
    overflow: hidden;
}

.bubble_text {
    background: yellow;
    padding: 8px;
    position: relative;
}

@keyframes slidein {
    from {
      bottom: 8px;
      right: 36px;
      width: 0;
    }
  
    to {
      bottom: 8px;
      right: 28px;
      width: 160px;
    }
  }

<div class="main">
  <div class="bubble">
    <div class="bubble_text">Hello world hello</div>
  </div>
</div>