什麼是有一個圖像重疊另一個HTML頁面上的所有瀏覽器的最佳方式

Question

我有兩個跨度：

<span id="top" ><img src="top.png" /></span> 
<span id="bottom" ><img src="bottom.png" /></span> 

我如何可以擁有它，其中：

1. 頂部圖像重疊在底部圖像上
2. 確保頂部圖像顯示在底部圖像的前面）（而不是在其後面）
3. 確保跨瀏覽器的對齊是一致的

Answer 1

@ooo;你可以給position:relative你的跨度，因爲z-index僅適用於position absolute & relative權這樣的：

CSS：

span{position:relative;display:block} 
#top{z-index:1;} 
#bottom{margin-top:-20px} 

HTML：

<span id="top" ><img src="top.png" /></span> 
<span id="bottom" ><img src="bottom.png" /></span> 

Answer 2

span { position:relative;display:block; } 
#bottom { z-index: 1;margin-top:-10px; } 
#top { z-index: 2; } 

這應該重疊，他們一點。 CSS真的取決於它們應該重疊多少...

Answer 3

將元素包裝在容器中;

<div id="image-container"> 
    <span id="top" ><img src="top.png" /></span> 
    <span id="bottom" ><img src="bottom.png" /></span> 
</div> 

設置在容器的CSS來position: relative;

然後使用;

#top { 
    position: absolute; 
    z-index: 2; 
} 
#bottom{ 
    position: absolute; 
    z-index: 1; 
} 

使用left和top來定位你的圖片。

這應該會給瀏覽器帶來最一致的結果。由於元素易受早期版本IE中存在的雙重容限錯誤的影響，因此應該特別傾向於使用邊距來定位圖像。