Layer divs on top of each other while maintaining inline flow

[DeltaFrog 15 Likes (Newbie)]

Hi all,    I know this isn't a Greensock issue but I've been trying to figure it out for 2 days and I'm not sure where to ask this type of question.  Feels like its a really simple thing but I am just not a css/html person.  :S  Can anyone recommend a good html/css forum?   

 

I'm going to illustrate my problem here just incase somebody has a quick answer.  Thank you!!

 

Ok...

My code pen has 4 divs and I want to layer them on top of each other so I can fade them in and out using greensock.  I can get the divs to layer on top of each other by changing their css to position: absolute instead of relative but doing that removes the 4 divs from the parent/document flow so the rest of the elements on the page just go behind the divs instead of under them.   How can I group and layer Divs on top of each other while also maintaining the inline flow?

 

 

Currently it looks like this:  

 

  

 

This is the desired result, 4 divs layered on top of each other with the parent div still maintaining its height.

 

  

 

Big Thanks!

 

 

 

 

See the Pen OJzxvrJ by chriscalabrese (@chriscalabrese) on CodePen

[OSUblake 18,474 Likes (Superhero)]

I normally just set the position of the children to absolute and then set the height of their parent.

 

[DeltaFrog 15 Likes (Newbie)]

Thanks Blake,  super appreciated.   

 

I changed the child width to 100% and added a px height to the parent.  However the parent height is a static number so it only matches the Childs height when the window is at an specific width, how do I get the child and parent to always match in height?  I tried adding a 100% height to the parent but that doesn't seem to work as expected.  When the window width changes the charts resize their height but the parent does not so the layout is always broken.   What am I missing here?   

 

.parent {

  position: relative;
  outline: 6px dotted orange;
  height: 300px;
  // height: 100%;
       
}

.childClass {
   position: absolute;
    width: 100%
   
}

 

How do I get the parent to scale to the same height as its content?

 

  

 

 

See the Pen JjMBqwM?editors=1100 by chriscalabrese (@chriscalabrese) on CodePen

 

 

 

[The Old Designer 26 Likes (Newbie)]

Can you use this for the parent element?

display: flex; /* equal height of the children */

[DeltaFrog 15 Likes (Newbie)]

27 minutes ago, The Old Designer said:

Can you use this for the parent element?

display: flex; /* equal height of the children */

Hi The Old Designer,  I played with adding flex but could not get the result I desired.   If you can get it to work in a code pen I'll be forever grateful.   This seems so simple but turning into a big roadblock for me.   

[PointC 14,183 Likes (Superhero)]

Maybe set the parent to a grid and place each child in column 1 row 1.

 

.parent {
  position: relative;
  outline: 6px dotted orange;
  display: grid;
}

.childClass {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  
}

video {
  width: 100%;
}

See the Pen 61a16326f62367299314b686f5e4e608 by PointC (@PointC) on CodePen

 

YMMV. Happy tweening.

 

[DeltaFrog 15 Likes (Newbie)]

I might cry, thank you so so so much Craig.    

[DeltaFrog 15 Likes (Newbie)]

Craig is 100% super hero.