2011-11-04 67 views
2

我有這樣的代碼:CSS:如何設置絕對一個相對位置DIV中跨度的位置包含

<br><br><br> 
<div style="position: relative; background: #000000; height: 400px;"> 
    <span style="position: absolute; top: 0; left: 0; display: block; background: #FF0000; width: 100px; height: 100px;"> 
    </span> 
</div> 

它的工作原理,我需要的是跨度所在的絕對位置比較div容器。

但是,當我添加圖像的div內:

<br><br><br> 
<div style="position: relative; background: #000000; height: 400px;"> 
    <img src="FabledLeviathan.png"> 
    <span style="position: absolute: top: 0; left: 0; display: block; background: #FF0000; width: 100px; height: 100px;"> 
    </span> 
</div> 

跨距不顯示在[0,0]比較到div容器,因爲它沒有前。它現在顯示在圖像下。我應該如何解決這個問題?

回答

6

你在<span>的風格有一個小的錯字。

您有一個:後面的單詞absolute。應該是;

<div style="position: relative; background: #000000; height: 400px;"> 
    <img src="FabledLeviathan.png"> 
    <span style="position: absolute; top: 0; left: 0; display: block; background: #FF0000; width: 100px; height: 100px;"> 
    </span> 
</div> 
+2

http://jsfiddle.net/Eh6v8/演示修復此錯字之後的正確行爲。 –

+0

哦,這是那個搞砸了整個劇本的錯字。謝謝。 – xx3004