How do I keep a child div at a fixed position while the parent div changes position?-CodePudding

Inside a div 'textblock', which is yellow, I've added a div 't1 (red) and inside that one another div 'tt1' wish a line of text inside it.

What I'm trying to do first is to move that 'tt1' div down 40px. But the child div 'tt1' should remain at the top and should move along down with it.

I managed to do it by moving that child div up again with -40px, but I was wandering if there was another sollution to do just that but without me having to use a negative number to move the child div up. For example: if I decided to move the parent div down 80px, I would then also have to change the position of child div 'tt1' by negative 80px.

Is there a way to have that child div stay at it's fixed position even when I move the parent div? So that I don't have to change both the top value of t1 and tt1 each time?

I guess I could move 'tt1' to under the div 'textblock', but my goal with this is to animate the 'tt1' div from within 't1'. So that I could have that text appear by setting overflow:hidden on parent div 't1'

I've got this Codepen which shows how I would want it: the text stay at the top of that yellow square while it's parent div is more down in that square. I used 'top: -50px' here' for that text but ideally I wouldn't have to change both position values of the parent and child div. I would like only having to edit the parent div position while the child div stays at its position.

Codepen: Keep child position fixed?

HTML:

<div >

<div id='textblock'>

<div id='t1'>
<div id='tt1'>THIS IS A TEST</div>
</div>
  
</div>
  
</div>

CSS:

.container {
    width:300px;
    height:250px;
    background-color: orange;
    position:absolute;
}
#textblock {
  background-color:yellow;
  border:1px solid black;
  width:170px;
  height:170px;
  position:relative;
  top:30px;
  left:30px;
}

#t1 {
    position:relative;
    background-color:red;
    width:100%;
    height:20px;
    top:40px;
}
#tt1 {
    position:absolute;
    top:-40px;
}

CodePudding user response：

You can't move a child around in flow layout without the parent being affected. That's just how it works, which is why you were able to do it in positioned layout.

But I believe your question is actually about animating a child coming into the bounds of a parent. That's much easier, and can be done with transform. Transforms take place after the layout algorithm decides where to place things. This means you can initialize the child with an offset transform, and fix it up with an animation.

/*
  Define the animation that we want to perform

  In this case, .child starts off with translateY(150%) which
  overflows. Our animation will bring it back to baseline. (0%)
*/
@keyframes up {
  100% {
    transform: translateY(0%);
  }
}

.child {
  transform: translateY(150%);
  animation: up 0.8s;
  animation-delay: 1.2s;
  /* Keep state at the last animation frame */
  animation-fill-mode: forwards;
}

.parent {
  background-color: deeppink;
  overflow: hidden;
  padding: 8px;
}

/* Rest */

main {
  width: 300px;
  height: 300px;
  background-color: steelblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section {
  width: 50%;
  height: 50%;
  margin: auto;
  background-color: white;
  border: 1px solid black;
}

<main>
  <section>
    <div class='parent'>
      <div class='child'>THIS IS A TEST</div>
    </div>
  </section>
</main>