Jump to content
Search Community

Layer divs on top of each other while maintaining inline flow

DeltaFrog test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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:  

 

  possible.thumb.png.182579a3275f5f898ecda459a776986d.png

 

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

 

  desired-result.png.76dc85877e2d56b092302a4a93857720.png

 

Big Thanks!

 

 

 

 

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

Link to comment
Share on other sites

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?

 

  parent-too-tall.png.9ba75f932fa7ad13d9ccb62165bffc45.png

 

 

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

 

 

 

Link to comment
Share on other sites

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.  :( 

Link to comment
Share on other sites

  • Solution

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.

:)

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...