ForumEasy.com

Edit Your Code:
<!DOCTYPE html>
<html>
  <head>
    <style>

     /* edit or add your own CSS code here */

    .container {
        position: relative;
        margin: 5px;
        border: 2px dashed #000000;
        width: auto;
        height: 220px;
    }
    .box {
        display: inline-block;
        margin: 10px;
        width: 80px;
        height: 50px;
    }
    #box1 {background-color: red;}
    #box2 {background-color: green;}
    #box3 {
        background-color: blue;
        position: absolute;
        top: 30px;
        left: 20px;
    }
    #box4 {background-color: yellow;}
    #box5 {background-color: fuchsia;}

    </style>
  </head>
  
  <body>

   <h2>CSS Positioning Example -- position:absolute</h2>

<DIV class="container">
    <div class="box" id="box1">Box#1</div>
    <div class="box" id="box2">Box#2</div>
    <div class="box" id="box3">Box#3</div>
    <div class="box" id="box4">Box#4</div>
    <div class="box" id="box5">Box#5</div>
</DIV>

<p>The blue box has been taken away from the normal flow as if it were not there (not even the occupied space). It is now placed at <b>30px</b> from <b>top</b> and <b>20px</b> from <b>left</b>, <b>absolutely</b> from the root document or its parent container (the parent container must declare as position:relative).</p>    
    
  </body>
</html>
Result Output:

Home » Sandbox