使用相對定位覆蓋圖像的文本

我想定位覆蓋圖像的文本。下面是我目前使用的代碼：使用相對定位覆蓋圖像的文本

<td width="10%"> 
    <img src="tempballoon.png" alt="balloon" style="z-index: -1"/> 
    <div style="position:relative;left:30px;top:-75px;font-size: 32px;display: none"> 
     Test 
    </div> 
</td>

我的問題是，雖然文本正確疊加，將「空間」消耗在<td>仍然存在！當我嘗試用'margin-top'替換<div>中的'top'位置時，它也會影響<img>，因此<img>會越過<td>的邊界。

請幫幫我！

謝謝！

來源

2011-09-17 Water

你想position: absolute和容器是relative：

<td width="10%" style="position: relative;"> 
    <img src="tempballoon.png" alt="balloon" style="z-index: -1"/> 
    <div style="position:absolute;left:0px;top:0px;font-size: 32px;display: none"> 
     Test 
    </div> 
</td>

來源

2011-09-17 03:32:15 Blender

謝謝！完美工作！ – Water

建議爲多個樣式屬性創建一個css樣式表。 – Persijn

這個答案是錯誤的，表格元素不能被定位。有些瀏覽器像Chrome一樣適用它，但它不正確 –

爲什麼不把圖像設置爲div的背景TD內一個div和刪除您在div的文字？

<td width="10%"> 
<div style="background: transparent url("tempballoon.png") no-repeat left top; font-size: 32px;width: 100%; height: height:[height of image]"> 
    Test 
</div> 
</td>

來源

2011-09-17 04:00:36 CBRRacer

如果正在使用的圖像被放大，此答案不是很通用。 –

@EnocNRoll沒有響應網站這不是最好的選擇。然而，在響應式設計中使用表格也不是最通用的選擇，所以我想我會給出一個選項，因爲它們都適用於OP的問題。另外值得注意的是z-index的樣式是多餘的，因爲z-index只能用於定位元素。 – CBRRacer

使用相對定位覆蓋圖像的文本

回答

相關問題