положение относительного и абсолютного doens't работы правильно

Question

Согласно официальной документации, позиция

абсолют:

положение элемента к его первому anchestor позиционирован относительно. Итак, Я хочу реализовать пять звезд с номером внутри них (на его центре). Каждая звезда и номер помещаются в контейнер, расположенный относительно, но я отметил, что число всегда позиционируется абсолютным отношением к контейнеру FIRST вместо его ближайшего родителя . На самом деле числа накладываются друг на друга.

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/

Answer 2

See this Fiddle

При работе с 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; 
} 

Вы плавали неправильный элемент. В ordner, чтобы получить их подряд, вам необходимо плавать .contStella