Плавающий текст поверх изображения в ячейке таблицы

Question

Я пытаюсь разместить текст поверх изображения в 3-м столбце первой строки таблицы. Эта ячейка имеет <img> внутри (обработано psd-нарезкой), и я хочу поместить текст поверх нее. Я пробовал float: left и position: absolute, но, похоже, ничего не работает.

Есть идеи?

Answer 1

position:absolute в сочетании с z-index должны работать.

Если это возможно в вашем дизайне, вы также можете использовать изображение в качестве фона ячейки таблицы и просто поместить текст в качестве егосодержание.

Редактировать: Также см. этот вопрос о проблеме, с которой я столкнулся только в 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>

Вы можете найти его полезным для дальнейшего использования.