How to position absolutely inside float: left?

Question

Why does adding a left rule change the behavior so much? Is it possible to set the 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; } 

Answer 1

To set the absolute value, you need to assign this div (in your case) to the relative positioned parent

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

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

Take a look at this JSFIDDLE