位置相對和絕對好好嘗試一下正常工作

根據官方文檔中，位置相對和絕對好好嘗試一下正常工作

位置絕對：

位置，他的第一個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; 
    }

來源

2013-07-04 Sonia

只需添加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/

來源

2013-07-04 13:57:44

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

來源

2013-07-04 14:03:17

位置相對和絕對好好嘗試一下正常工作

回答

相關問題