Urban_girl_by_danka_ns

Как работает СSS позиционирование

Безусловно, свойство позиционирования является одним из основных инструментов, которые используются в CSS. Однако, есть несколько концепций для этого инструмента, которые точно пригодятся новчикам. Поехали...

Что такое позиционирование?

Когда браузер открывает вебстраницу, начинают отрисовыватся элементы страницы (блоки, параграфы, заголовки и т.д.) в той последовательности, в какой они идут в HTML разметке. Позиционирование — это естественный способ организации отображения эелментов и их наложения. Существует всего четыре типа позиционирования: статический (eng. static), относительный (eng. relative), абсолютный (eng. absolute) и фиксированный (eng. fixed).

По умолчанию, элементы позиционируются статически

Для каждого элемента на странице, которому явно не задано свойство позиционирования, ставится статический тип. Статическое позиционирование означает, что каждый элемент позиционируется в естественном порядке, т.е. в порядке его следования в HTML разметки. Блочные (eng. block) элементы отображаются под блочными, а встроенные (eng. inline) рядом со встроенными элементами.

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

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

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

При установке position:fixed для элемента, его позиция привязывается к окну браузера. Это подойдет для тулбаров, кнопок или навигационных меню, которые закреплены в фиксированном положении и прокручиваются со страницей.

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

Абсолютное позиционирование

Абсолютное позиционирование очень похоже на фиксированнное, с той лишь разницей, что элемент с этим свойством позиционируется относительно его предка, у которого тип позиционирования отличается от статического. Таким образом, используя свойства CSS (слева, справа, вверху, внизу) можно точно указывать расположение элемента. Например, с помощью этого типа можно спозиционировать блок по горизонтали и вертикали, что хорошо рассказано в статье “Центрирование DIV по горизонтали и вертикали”

Применение

С помощью этих свойств можно построить дизайн любой сложности (с наложением слоев, блоков), который поднимет ваш сайт на новый уровень. А если еще использовать и свойство z-index, ты вы сможете менять стандартные правила наложения, перекрывающихся элементов. Но об этом по подробней в другой раз.


Оставить комментарий