Текст или картинка, поверх картинки!

У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать..

И так, для начала создадим саму картинку.

<img src="url images" />

Есть картинка, поверха которой нужно сделать текст. Мы сделаем это с помощью “position“. Но для начала, что оно из себя представляет.

Position - Устанавливает способ позиционирования, относительно родителя.

  • position: absolute; - задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя.
  • position: relative; - задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
  • position: static; - (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего “потока” текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание.
  1. Хм.. Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану.
  2. А если вам нужно будет сделать маленькую картинку в нутри тега <div> или в таблице, то лучше воспользоваться relative.

Мне нужно было сделать так как во втором примере. Делаем текст, который в дальнейшем будет находится на картинке. Вот пример:

<div width="10%"><!-- Див, в ктором находится наш текст и картинка -->
<img src=”logo.jpg”>
<div>Текст поверх картинки</div>
</div>

После этого кода получается текст ниже картинки. Чтобы он стал на картинке, задаем ему position:relative;

<div width="100%">
<img src=”logo.jpg”>
<div style=”position:relative;bottom:100px;”>Текст поверх картинки</div>
</div>

bottom:100px; - показывает настройки расположения текста. Настраивайте под свой вкус ;).

Ну вот и все.. Надеюсь полезен был урок!

Другие посты