Относительное позиционирование или текст поверх картинки

Как можно поверх картинки написать текст?

Воспользоваться слоями или поставить картинку фоном элемента.
Зависит от конкретной ситуации.

Установка картинки фоном:
воспользоваться css свойством background-image

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>background-image</title>
 <style type="text/css">
  BODY {
   background-image: url(images/bg.jpg); /* Путь к фоновому изображению */
   background-color: #c7b29a; /* Цвет фона */
  }
 </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

подробнее об этом способе можно почитать в http://www.htmlbook.ru

При помощи слоев:

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>тест</title>
    <style type="text/css" media="screen">
        .rel_block {
            position:relative;
            background-color:#f00;
            width:15px;
            height:12px;
            padding-top:3px; /*для вертикального выравнивания*/
            text-align:center;
        }
        .main_block {
            width:225px;
            height:88px;
            border:1px solid #000;
        }
    </style>
</head>

<body>

    <div class="main_block">
        <img src="http://coder.v-tanke.ru/images/coder_logo_min.png" width="225" height="88" />
        <div style="position:relative; top:-88px;left:0px;">text1</div>
        <div style="position:relative; top:-108px;left:180px;">text2</div>
    </div>

    <br clear="all" />

    <div class="main_block">
        <img src="http://coder.v-tanke.ru/images/coder_logo_min.png" width="225" height="88" />
        <div style="position:relative; top:-88px;left:0px;float:left">text1</div>
    </div>

    <br clear="all" />

    <div class="main_block" style="line-height:10px;font-size:10px;">
        <img src="http://coder.v-tanke.ru/images/coder_logo_min.png" width="225" height="88" />
        <div class="rel_block" style="left:  0px;top: -90px;">1</div> <!-- left=0 top=-88px-2px -->
        <div class="rel_block" style="left:210px;top:-105px;">2</div> <!-- left=225px-15px top=-15px-88px-2px -->
        <div class="rel_block" style="left:  0px;top: -47px;">3</div> <!-- left=0 top=-2px-15px*3 -->
        <div class="rel_block" style="left:210px;top: -62px;">4</div> <!-- left=225px-15px top=-2px-15px*4 -->
    </div>

</body>
</html>

по теме
http://www.htmlbook.ru/css/position.html http://www.htmlbook.ru/css/z-index.html

Дополню статью еще одним примером более приближенным к реальным потребностям, возникающим при верстке.

Итак требуется разместить блок с навигационными ссылками поверх картинки логотипа.

Приведу сразу код реализации, а ниже опишу что за что отвечает и приведу скрин.

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>тест</title>
    <style type="text/css" media="screen">
        #main-nav {
            position:relative;
            height:14px;
            left:  80px;
            top: -70px;
            text-align:left; font-family: "Verdana"; font-size: 12px; font-weight: 700;
        }
        .main_block {
            height:70px;
            overflow: hidden;
            border:1px solid #000;
        }

        #main-nav a:hover, #main-nav a:active {
            color: #000000;
        }
        #main-nav a {
            color: #535f62;
            text-decoration: none;
        }
    </style>
</head>

<body>

    <div class="main_block" style="line-height:10px;font-size:10px;">
        <a href="#logo"><img src="http://coder.v-tanke.ru/styles/ca_gen2/imageset/site_logo.gif" width="358" height="70" /></a>
        <div id="main-nav">
             <a href="#"><b>Главная</b></a> &#0183;
             <a href="#"><b>Трекер</b></a> &#0183;
             <a href="#"><b>Поиск</b></a>
        </div>
    </div>

</body>
</html>

теперь кратко о том "что есть что".

Итак у нас есть главный контейнер (main_block), в котором находится картинка и блок ссылок (main-nav)
Рассмотрим класс main_block

height:70px; - высота блока, равная высоте логотипа
overflow: hidden; - скрываем всё выступающие за эту высоту
border:1px solid #000; - рамка просто для нагляности

без обрезания высоты блока он может расползтись в некоорых браузерах на высоту блока ссылок.
рассмотрим main-nav

position:relative; - указание на то, что используем относительное позиционирование
height:14px; - высота блока
left: 80px; - отступ от левого края картинки для наглядности
top: -70px; - поднимаем блок вверх на высоту картинки логотипа
text-align:left; font-family: "Verdana"; font-size: 12px; font-weight: 700; - настройки шрифта