Question

i put div with class="inner-box2" after div with class="inner-box".

HTML:

 <div class="box">

   <div class="inner-box"></div>

   <div class="inner-box2"></div>

 </div>

CSS:

 .box {
     position: relative;
     width: 400px;
     height: 400px;
     border: solid 10px red;
  }

  .inner-box {
    border: solid 10px blue;
    position: absolute;
    height:150px;
    width:380px;

  }
   .inner-box2 {
    border: solid 10px green;
  }

Now, I need to show div(inner-box2) after div(inner-box) but in my Code div(inner-box2) show in under div(inner-box). how to fix this? See Online Demo

Answer 1

If you are putting an element below the absolute position, you can add a margin to bump down your next element the distance required to “skip” the absolute item’s space and presence. That way in the code, the item is still below your absolute item, but still visually appears below it.