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

Question

根据官方文档，

position absolute:

position an element to his first anchestor relatively positioned. So, i want to realize five stars with a number inside them (at his centre). Every star and number is placed into a container positioned relatively, but i noted that the number are always positioned absolutly respect to the FIRST container instead of his nearest parent. In fact numbers overlpas each other.

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

只需将 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/