css - 如何在 float:left 中绝对定位？

Question

为什么添加左规则会如此剧烈地改变行为？是否可以相对于默认位置定位？

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

为了定位绝对的东西，您需要将该 div（在您的情况下）分配给相对定位的父级

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

}

添加为其中的所有元素position:relative创建.level1了一种坐标系。

看看这个 JSFIDDLE