CSS How to position two elements on top of each other without specifying a height

Question

I have two DIVs that I need to position exactly on top of each other  However  when I do that  the formatting gets all screwed up because the containing DIV acts like there is no height  I think this is the expected behavior with position absolute but I need to find a way to position these two elements on top of each other and have the container stretch as the content stretches   The top left edge of  layer2 should be exactly aligned to the top left edge of layer1   lt  -- HTML -- gt   lt div class  container row  gt       lt div class  layer1  gt          Lorem ipsum         lt  div gt       lt div class  layer2  gt          More lorem ipsum         lt  div gt   lt  div gt   lt div class  container row  gt         same HTML as above  This one should never overlap the  container row above   lt  div gt      CSS     container row      layer1       position absolute      z-index  1      layer2       position absolute      z-index  2

User · Answer

Great answer   mu is too short   I was seeking the exact same thing  and after reading your post I found a solution that fitted my problem   I was having two elements of the exact same size and wanted to stack them  As each have same size  what I could do was to make  position  absolute  top  0px  left  0px    on only the last element  This way the first element is inserted correctly   pushing  the parents height  and the second element is placed on top   Hopes this helps other people trying to stacking 2  elements with same  unknown  height

User · Answer

Due to absolute positioning removing the elements from the document flow position  absolute is not the right tool for the job  Depending on the exact layout you want to create you will be successful using negative margins  position relative or maybe even transform  translate  Show us a sample of what you want to do we can help you better

User · Answer

Here s another solution using display  flex instead of position  absolute or display  grid    x000D   x000D   container row  x000D    display  flex  x000D    x000D   x000D   layer1   x000D    width  100   x000D    background-color  rgba 255 0 0 0 5       red x000D    x000D   x000D   layer2  x000D    width  100   x000D    margin-left  -100   x000D    background-color  rgba 0 0 255 0 5       blue x000D    x000D   lt div class  container row  gt  x000D       lt div class  layer1  gt  x000D           lt span gt Lorem ipsum    lt  span gt  x000D       lt  div gt  x000D       lt div class  layer2  gt  x000D          More lorem ipsum    x000D       lt  div gt  x000D   lt  div gt  x000D   lt div class  container row  gt  x000D         same HTML as above  This one should never overlap the  container row above  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s some reusable css that will preserve the height of each element without using position  absolute    stack       display  grid     stack  gt          grid-row  1      grid-column  1      The first element in your stack is the background  and the second is the foreground

User · Answer

Actually this is possible without position absolute and specifying any height  All You need to do  is use display  grid on parent element and put descendants  into the same row and column   Please check example below  based on Your HTML  I added only  lt span gt  and some colors  so You can see the result   You can also easily change z-index each of descendant elements  to manipulate its visibility  which one should be on top      x000D   x000D   container row  x000D    display  grid  x000D    x000D   x000D   layer1   layer2  x000D    grid-column  1  x000D    grid-row  1  x000D    x000D   x000D   layer1 span  x000D    color   fff  x000D    background   000cf6  x000D    x000D   x000D   layer2  x000D    background  rgba 255  0  0  0 4   x000D    x000D   lt div class  container row  gt  x000D       lt div class  layer1  gt  x000D           lt span gt Lorem ipsum    lt br gt Test test lt  span gt  x000D       lt  div gt  x000D       lt div class  layer2  gt  x000D          More lorem ipsum    x000D       lt  div gt  x000D   lt  div gt  x000D   lt div class  container row  gt  x000D         same HTML as above  This one should never overlap the  container row above  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

First of all  you really should be including the position on absolutely positioned elements or you will come across odd and confusing behavior  you probably want to add top  0  left  0 to the CSS for both of your absolutely positioned elements  You ll also want to have position  relative on  container row if you want the absolutely positioned elements to be positioned with respect to their parent rather than the document s body      If the element has  position  absolute   the containing block is established by the nearest ancestor with a  position  of  absolute    relative  or  fixed        Your problem is that position  absolute removes elements from the normal flow      It is removed from the normal flow entirely  it has no impact on later siblings   An absolutely positioned box establishes a new containing block for normal flow children and absolutely  but not fixed  positioned descendants  However  the contents of an absolutely positioned element do not flow around any other boxes    This means that absolutely positioned elements have no effect whatsoever on their parent element s size and your first  lt div class  container row  gt  will have a height of zero   So you can t do what you re trying to do with absolutely positioned elements unless you know how tall they re going to be  or  equivalently  you can specify their height   If you can specify the heights then you can put the same heights on the  container row and everything will line up  you could also put a margin-top on the second  container row to leave room for the absolutely positioned elements  For example      http   jsfiddle net ambiguous zVBDc

User · Answer

Of course  the problem is all about getting your height back  But how can you do that if you don t know the height ahead of time  Well  if you know what aspect ratio you want to give the container  and keep it responsive   you can get your height back by adding padding to another child of the container  expressed as a percentage   You can even add a dummy div to the container and set something like padding-top  56 25  to give the dummy element a height that is a proportion of the container s width  This will push out the container and give it an aspect ratio  in this case 16 9  56 25     Padding and margin use the percentage of the width  that s really the trick here

User · Answer

I had to set   Container height   Element1 height   Element2 height   Container       position  relative      ElementOne   Container   ElementTwo      width  283px      height  71px      ElementOne       position absolute      ElementTwo      position absolute      Use can use z-index to set which one to be on top

User · Answer

After much testing  I have verified that the original question is already right  missing just a couple of settings    the container row MUST have position  relative  the children        MUST have position  absolute  left 0  to make sure the children       align exactly over each other  the container row should have additional styling    height x  line-height x  vertical-align middle  text-align center  could  also  help

[css] CSS: How to position two elements on top of each other, without specifying a height?

Examples related to css