How to position absolute inside a div

Question

I m having a strange problem positioning a set of divs inside another div  I think it will be best to describe it with an image     Inside the black   box  div there are two divs   a   b  that have to positioned in the same place  What I m trying to achieve is pictured in the first image  second one is the effect I get  It looks like if the divs were floated without clearing or something  which is obviously not the case  Any ideas would be welcome   Here s the code for this sample   CSS    box       background-color   000      position  relative      padding  10px      width  220px      a       width  210px      position  absolute      top  10px      left  10px      background-color   fff      padding  5px      b       width  210px      position  absolute      top  10px      left  10px      background-color  red      padding  5px      after       background-color  yellow      padding  10px      width  220px      HTML        lt div id  box  gt           lt div class  a  gt Lorem lt  div gt           lt div class  b  gt Lorem lt  div gt       lt  div gt        lt div id  after  gt Hello world lt  div gt

User · Answer

The problem is described  among other  in this article    box is relatively positioned  which makes it part of the  flow  of the page   Your other divs are absolutely positioned  so they are removed from the page s  flow      Page flow means that the positioning of an element effects other elements in the flow    In other words  as  box now sees the dom   a and  b are no longer  inside   box     To fix this  you would want to make everything relative  or everything absolute   One way would be    a      position relative     margin-top 10px     margin-left 10px     background-color red     width 210px     padding  5px

User · Answer

One of  a or  b needs to be not position absolute  so that  box will grow to accommodate it   So you can stop  a from being position absolute  and still position  b over the top of it  like this    x000D   x000D    box   x000D          background-color   000  x000D          position  relative       x000D          padding  10px  x000D          width  220px  x000D        x000D       x000D       a   x000D          width  210px  x000D          background-color   fff  x000D          padding  5px  x000D        x000D       x000D       b   x000D          width  100px     So you can see the other one    x000D          position  absolute  x000D          top  10px  left  10px  x000D          background-color  red  x000D          padding  5px  x000D        x000D       x000D       after   x000D          background-color  yellow  x000D          padding  10px  x000D          width  220px  x000D        x000D       lt div id  box  gt  x000D           lt div class  a  gt Lorem lt  div gt  x000D           lt div class  b  gt Lorem lt  div gt  x000D       lt  div gt  x000D       lt div id  after  gt Hello world lt  div gt  x000D   x000D   x000D     Note that I ve made the widths different  so you can see one behind the other    Edit after Justine s comment  Then your only option is to specify the height of  box  This    box                     height  30px      works perfectly  assuming the heights of a and b are fixed   Note that you ll need to put IE into standards mode by adding a doctype at the top of your HTML   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN             http   www w3 org TR html4 strict dtd  gt    before that works properly

User · Answer

First all block level elements are postioned static to the  document   The default positioning for all elements is position  static  which means the element is not positioned and occurs where it normally would in the document  Normally you wouldn t specify this unless you needed to override a positioning that had been previously set  Relative position  If you specify position  relative  then you can use top or bottom  and left or right to move the element relative to where it would normally occur in the document  When you specify position  absolute  the element is removed from the document and placed exactly where you tell it to go    So in regard to your question you should position the containing block relative  i e    parent     position  relative      And the child element you should position absolute to the parent element like this    child     position  absolute        See  Learn CSS Positioning in Ten Steps

User · Answer

The absolute divs are taken out of the flow of the document so the containing div does not have any content except for the padding    Give  box a height to fill it out    box       background-color   000      position  relative      padding  10px      width  220px      height 30px

[css] How to position absolute inside a div?

Examples related to css

Examples related to positioning