Главная » 2015 » Декабрь » 3 » Урок 12 - Атрибут position (retative, absolute, static, fixed, inherit) в HTML

03:44

Урок 12 - Атрибут position (retative, absolute, static, fixed, inherit) в HTML

Атрибут position в HTML

Стиль CSS position отвечает за месторасположения элемента относительно других элементов. Используется в стилях довольно часто и поддерживается всеми браузерами (Internet Explorer, Netscape, Opera, Safari, Mozilla, Firefox, Chrome, Яндекс Браузер). Приведем простенький пример для понимания.

Примера 1. HTML-код:

<html> <head> <style type="text/css"> .poselementtop{ position: relative; top: 10px; color:blue; } .poselementbottom{ position: relative; bottom: 10px; color: green; } </style> </head> <body> <p>Обычный текст <font class="poselementtop">Этот текст ниже на 10 пикселей</font> <font class="poselementbottom">А этот наоборот выше</font></p> </body> </html>

После того, как Вы откроете этот пример в окне браузера, должно отобразиться примерно следующее:

Это самый простой пример использования элемента position. Теперь давайте рассмотрим все возможные атрибуты, которые может принимать этот параметр, но для начала напишем его синтаксис в CSS:

position: absolute | fixed | relative | static | inherit ;

Примечание: через | перечислены все его возможные значения.

1. Атрибут position: retative

position: retative - относительное позиционирование. Мы видели пример использования этого элемента чуть выше.

При задании этого параметра, активизируются следующие параметры:

top
bottom
left
right

Если не указано никаких смещений, т.е.

top:0px; bottom:0px; left:0px; right:0px;

то отображение html-элемента происходит на том же месте как и по умолчанию (т.е. без задания retative). Если же указаны смещения, то элемент будет смещен относительно своего расположения либо ниже, выше, левее или правее. При этом другие окружающие элементы считают, что никакого смещения нету. Для пояснения этой особенности приведем пример.

Примера 2. HTML-код:

<div style="float:right; width:50px; height:50px; margin:5px; right: 100px; top: 100px; background:#FF0000;"> </div> <div style="background:#EFABCA;font-size:12px; padding:10px"> В чем же тогда разница?... </div>