漂浮文本在表格單元格內的圖像

Question

我想在表格中的第一行的第三列中的圖像上浮動文本。該單元格內有一個<img>（由psd切片處理），我想將文字放在它上面。我試過float: left和position: absolute，但似乎沒有任何工作。

任何想法？

Answer 1

position:absolute結合z-index應該工作。

如果在您的設計中可能，您也可以使用圖像作爲表格單元格的背景，並將文本作爲其內容。

編輯：另請參閱this question關於一個問題，我只在IE瀏覽器中使用圖像頂部的文本。

Answer 2

雖然我還建議規範辦法（把圖像作爲背景），下面是做它只是定位的解決方案：

<td style="position:relative;"> 
    <img src="..." style="position:absolute;z-index:1;" /> 
    <div style="z-index:2;position:relative;">your text goes here</div> 
</td> 

你可能會發現它進一步參考價值。