Как наложить текст на картинку (HTML + CSS)

[Acden]

Хочу сделать список товаров, будут оформленные плашки в Photoshop.

Не хочу писать цену в Photoshop, хочу чтобы она выводилась поверх картинки, в отведенном для этого месте.


Как это сделать в HTML + CSS?
Пробовал через Position:absolute, но текст уходит под картинку, с z-index изменений не вижу.

Надо было внешнему слою все-таки назнавать relative, Для просмотра ссылки Войди или Зарегистрируйся

 

[ko1obok]

в нужном месте ставишь блок, которому в css прописываешь бэкграундом свою картинку, в сам блок пишешь нужный текст, все будет работать
решения, содержащие position:absolute практически всегда ущербны, старайтесь употреблять его как можно меньше

 

[Acden]

Мне нужно именно с помощью img. Через background любой может сделать, это элементарно.

Решил проблему так:
у внешнего блока (img) ставится position:relative, у внутреннего :absolute.

 

[wmaximum]

чяерез margin c минусовым значением не получается?
типа так:

<img src="1140095.jpg" width="200" height="200"/>
<div style="width:200px; height:200px; margin-top:-100px; text-align:center; color:white">Насос</div>

У меня получилось )

 

[Delfi]

<div style="position:relative">
 
<img src="img.jpg" style=z-index: 1">
<div style="z-index:2;position:absolute;top: 5px">Текст</div>
 
</div>

Не забываем, что если внешний блок без position:relative, то блок с position:absolute не будет отталкиваться от этого родителя.

Ну или как описали выше - с margin. Дело вкуса

 

[tshestel]

Хочу сделать список товаров, будут оформленные плашки в Photoshop.

Не хочу писать цену в Photoshop, хочу чтобы она выводилась поверх картинки, в отведенном для этого месте.


Как это сделать в HTML + CSS?
Пробовал через Position:absolute, но текст уходит под картинку, с z-index изменений не вижу.

z-index нужно менять в родительском div, тогда он будет по верх картинке. А у вас он вынесен за пределы скорее всего.