Question

根据官方文件，

绝对位置

将一个元素定位到他的第一个相对定位的安慰者。所以，   我想要实现其中有一个数字的五颗星（在他的   中央）。每个星号和数字都放在一个容器中   相对而言，但我注意到这个数字始终是定位的   绝对地尊重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;
}

你漂浮了错误的元素。在订单中，你需要浮动.contStella

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

2 个答案: