Разбираемся в позиционировании html элементов.

Когда web-дизайн только вступил на путь своего развития, в основном для создания сайтов использовали табличную верстку. Практически все сайты были построены при помощи таблиц. Даже для того, чтобы сделать отступ слева, использовали пустую ячейку в таблице. В случае, когда нужно было поместить в таблицу какие-либо элементы, то в эту таблицу вставляли еще одну таблицу.

В конце, код получившейся страницы состоял из большого числа вложенных друг в друга таблиц, по принципу матрешки – одна большая, а в ней много маленьких.

Сегодня быстро развивается способ дизайна, в котором не используются таблицы, а предпочтение отдается свойству CSS – position. Часто, принимая на работу web-дизайнера, работодатель требует от него умения создавать страницы “без табличным” способом.

Способы установки позиционирования.

В каскадных таблицах стилей (CSS) существует специальное свойство, которое отвечает за позиционирование элемента, это свойство называется position. У свойства существуют определенные значения, это – fixed, static, absolute, relative и inherit.

Если ничего не менять, то свойство position будет иметь значение static. То есть когда значение position специально не устанавливалось, то этот элемент будет иметь статическое позиционирование. Это немаловажно. По умолчанию элемент не может унаследовать от родительского элемента значение position. Чтобы ему передавалось значение от родительского элемента, дочерний элемент должен иметь свойство inherit. Это выглядит так:

a.link{

position: inherit;

}

Согласно показанному примеру, ссылка будет иметь такое же позиционирование, как элемент, от которого она происходит.

Статическое позиционирование элемента.

По сути, статическое позиционирование именно позиционированием и не является. Такое значение специально указывать не нужно так, как оно всегда указано по умолчанию. Специально устанавливать его позиционирование возможно, для этого нужно просто отменить то глобально правило, которое было использовано по отношению к элементу раньше. Приведем пример:

простейший пример:

div {position:absolute}

#new {position:static}

Согласно примеру все элементы div будут иметь позиционирование absolute, то есть абсолютное. Но те элементы, которые имеют id-«new» будут иметь статическое позиционирование.

Если использовалось статическое позиционирование, то это будет значить, что с начала в html коде страницы будет идти элемент, который находится выше статически позиционируемого элемента, а потом уже он сам.

Фиксированное позиционирование.

Абсолютное позиционирование и фиксированное позиционирование имеют много общего между собой. Отличие их заключается в том, что окно браузера всегда будет являться содержащим блоком. Если во время просмотра страницы вы будете использовать полосу прокрутки, то элемент все равно будет оставаться на одном и том же месте.

Во время прогулки по всемирной сети многие встречали страницы, на которых висели окошки с рекламой, и не исчезали даже во время прокрутки страницы. В большинстве случаев в работе таких окошек используется JavaScript.

Элементы, которые имеют относительное позиционирование, отображаются в одном месте, хотя находятся совсем в другом. Элементы, имеющие фиксированное позиционирование и абсолютное позиционирование просто удаляются из документа. Каким бы ни было позиционирование – относительным, фиксированным или абсолютным, может получиться так, что одни элементы страницы, будут находиться сверху других.

Для того, чтобы разъяснить какие элементы должны находиться выше, а какие ниже используют Z-индекс. Чем ниже будет его значение, тем ниже будет находиться и элемент, которому этот индекс присвоен.

В статье были приведены некоторые варианты позиционирования элементов. CSS предоставляет нам способы при помощи которых можно значительно увеличить возможности обычного html. Но когда вы создаете страницу на основе свободно-позиционируемых элементов, то нужно проверять её отображение в различных браузерах так, как если вы допустите в создании страницы некоторые неточности или ошибки, то элементы в каждом браузере могут вести себя по-разному.