How to position absolutely inside float:left?

css, css-float, css-position, html

Solution

In order to position absolute something you need to assign that div(in your case) to a relative positioned parent

.level1 {
   float:left;
   margin:2px;
   border-style: solid;
   background: cyan;
   position:relative;

}

Adding `position:relative` makes `.level1` a sort of coordinate system for all elements inside of it.

Take a look at this JSFIDDLE

Problem

Why adding of left rule changes behavior so drastically? Is it possible to position relative to default position? http://jsfiddle.net/suzancioc/drDn3/6/ HTML: ``` <div class='level0'> <div class='level1'> Hello </div> <div class='level1'> Hello <div id='inner2'>inner2</div> </div> <div class='level1'> Hello <div id='inner3'>inner3</div> </div> </div> ``` CSS: ``` .level0 { height:40px; width: 500px; background:red; } .level1 { float:left; margin:2px; border-style: solid; background: cyan; } #inner1 { position: absolute; background: green; } #inner2 { position: absolute; background: green; left:0px; } #inner3 { position: absolute; background: green; } ```

Original source