У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать... И так, для начала создадим саму картинку. Code <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-обозревателем во внимание. Хм... Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану. А если вам нужно будет сделать маленькую картинку в нутри тега <div> или в таблице, то лучше воспользоваться relative. Мне нужно было сделать так как во втором примере. Делаем текст, который в дальнейшем будет находится на картинке. Вот пример: Code <div width="10%"><!-- Див, в ктором находится наш текст и картинка --> <img src="logo.jpg"> <div>Текст поверх картинки</div> </div> После этого кода получается текст ниже картинки. Чтобы он стал на картинке, задаем ему position:relative; Code <div width="100%"> <img src="logo.jpg"> <div style="position:relative;bottom:100px;">Текст поверх картинки</div> </div> bottom:100px; — показывает настройки расположения текста. Настраивайте под свой вкус ;). Ну вот и все... Надеюсь полезен был урок!
|