How to translate children elements of different size outside of their parents that have also different size and align them at the top of their parents

Question

At the beginning I need the children be centered in the middle of their parents and then move to the top of the parents.

Answer 1

@TemaniAfif has asnwered the question in a comment but I just put it into an answer in case of future use to someone.

The children are made to have position absolute and are placed with position bottom 100%, this enables them to go outside their parent and they will sit on top.

Note it is important to tell the system what the position is related to. The parent needs to be given a position (we assume relative is what is required) otherwise the system will look back up the tree to find an element that has its position set. If nothing is set the absolute positioning will be relative to the body, and that could mean the children just disappear (off the top).

 .container { margin-top: 35vmin; width: 100vw; height: 100vh; }.parent { position: relative; display: inline-block; margin: 5vmin; }.parent:nth-child(1) { width: 20vmin; height: 20vmin; background-color: pink; }.parent:nth-child(2) { width: 40vmin; height: 60vmin; background-color: green; }.parent:nth-child(3) { width: 30vmin; height: 20vmin; background-color: blue; }.child { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); }.parent:nth-child(1).child { width: 50%; height: 50%; background-color: magenta; }.parent:nth-child(2).child { width: 40%; height: 60%; background-color: lime; }.parent:nth-child(3).child { width: 50%; height: 20%; background-color: cyan; }

 <div class="container"> <div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div> </div>

UPDATE: the above snippet does not show how to place the children within their parents initially. The snippet below does this and allows for a transition between the two states (should this be required). In this case we aren't using the bottom positioning but top plus translation as that is smoothly animatable.

To center an element, position its top and left at 50%, that is 50% of the parent's height and width, then translate it -50% in the X and Y directions (that is 50% of its height/width). To move it to sit on top, put top 0 and translate it in the Y direction by its whole height.

 .container { margin-top: 20vmin; width: 100vw; height: 100vh; }.parent { position: relative; display: inline-block; margin: 5vmin; }.parent:nth-child(1) { width: 20vmin; height: 20vmin; background-color: pink; }.parent:nth-child(2) { width: 40vmin; height: 60vmin; background-color: green; }.parent:nth-child(3) { width: 30vmin; height: 20vmin; background-color: blue; }.child { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); transition: all 1s; }.parent:hover.child { top: 0; transform: translateX(-50%) translateY(-100%); }.parent:nth-child(1).child { width: 50%; height: 50%; background-color: magenta; }.parent:nth-child(2).child { width: 40%; height: 60%; background-color: lime; }.parent:nth-child(3).child { width: 50%; height: 20%; background-color: cyan; }

 <h3>HOVER OVER A RECTANGLE TO SEE THE CHILD MOVE</h3> <div class="container"> <div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div> </div>