html - 位置相对和绝对不能正常工作

Question

根据官方文档，

绝对位置：

定位一个元素到他的第一个anchestor 相对定位。所以，我想实现五颗星，里面有一个数字（在他的中心）。每个星星和数字都放置在一个相对定位的容器中，但我注意到数字总是绝对相对于第一个容器而不是他最近的父容器定位。事实上，数字是相互重叠的。

http://jsfiddle.net/FMKMr/

HTML

<div id="vota">
      <div class="contStella" id="stellauno"><img class="stellaVota" src="http://cdn5.iconfinder.com/data/icons/super-mono-reflection/yellow/star_yellow.png"/> <div class="numeroVota">1</div> </div>
      <div class="contStella" id="stelladue"><img class="stellaVota" src="http://cdn5.iconfinder.com/data/icons/super-mono-reflection/yellow/star_yellow.png"/> <div class="numeroVota">2</div> </div>
      <div class="contStella" id="stellatre"><img class="stellaVota" src="http://cdn5.iconfinder.com/data/icons/super-mono-reflection/yellow/star_yellow.png"/> <div class="numeroVota">3</div> </div>
</div>  

CSS

 .contStella
    {
        position:relative;

    }

    .numeroVota
    {
       position:absolute;
        font-size:40px;
        margin-left:15px;
        color:blue;
    }

    .stellaVota
    {
        float:left;
        height:50px;
    }

Answer 1

看到这个小提琴

使用 时position: absolute，您应该始终设置水平和垂直值，例如top和left

.contStella
{
   position:relative;        
   float: left;
}

.numeroVota
{
   position:absolute;
   font-size:40px;
   margin-left:15px;
   color:blue;
   top: 0;
   left: 0;
}

.stellaVota
{
   height:50px;
}

你浮动了错误的元素。为了使它们连续排列，您需要漂浮.contStella

Answer 2

只需像这样添加display: inline-block;到 contStella 类：

.contStella
{
    position:relative;
    display: inline-block;
}

.numeroVota
{
   position:absolute;
    font-size:40px;
    margin-left:15px;
    color:blue;
}

.stellaVota
{
    float:left;
    height:50px;
}

http://jsfiddle.net/FMKMr/3/