226 Безусловно, свойство позиционирования является одним из основных инструментов, которые используются в CSS. Однако, есть несколько концепций для этого инструмента, которые точно пригодятся новчикам. Поехали...
Что такое позиционирование?
Когда браузер открывает вебстраницу, начинают отрисовыватся элементы страницы (блоки, параграфы, заголовки и т.д.) в той последовательности, в какой они идут в HTML разметке. Позиционирование — это естественный способ организации отображения эелментов и их наложения. Существует всего четыре типа позиционирования: статический (eng. static), относительный (eng. relative), абсолютный (eng. absolute) и фиксированный (eng. fixed).
По умолчанию, элементы позиционируются статически
Для каждого элемента на странице, которому явно не задано свойство позиционирования, ставится статический тип. Статическое позиционирование означает, что каждый элемент позиционируется в естественном порядке, т.е. в порядке его следования в HTML разметки. Блочные (eng. block) элементы отображаются под блочными, а встроенные (eng. inline) рядом со встроенными элементами.
Относительное позиционирование
При установке относительного типа позиционирования, каких либо заметных изменений в отображении элементов не происходит. С той лишь разницей что, теперь можно явно указывать элементами, где они должны располагаться (слева, справа, вверху или внизу).
|
1 2 3 4 5 6 7 8 9 10 11 |
.relativeDiv{ /* Moving the div to the top-left from where it would normally show: */ position:relative; top:-50px; left:-100px; } |
Фиксированное позиционирование
При установке position:fixed для элемента, его позиция привязывается к окну браузера. Это подойдет для тулбаров, кнопок или навигационных меню, которые закреплены в фиксированном положении и прокручиваются со страницей.
|
1 2 3 4 5 6 7 8 9 10 11 |
.fixedDiv{ /* Fixing the div 20 px from the bottom of the browser window: */ position:fixed; right:20px; bottom:20px; } |
Единственный минус использования этого свойства в том, что оно не поддерживается браузером Internet Explorer 6.0 и если вам дорога совместимость, то нужно подумать о других типах позиционирования.
Абсолютное позиционирование
Абсолютное позиционирование очень похоже на фиксированнное, с той лишь разницей, что элемент с этим свойством позиционируется относительно его предка, у которого тип позиционирования отличается от статического. Таким образом, используя свойства CSS (слева, справа, вверху, внизу) можно точно указывать расположение элемента. Например, с помощью этого типа можно спозиционировать блок по горизонтали и вертикали, что хорошо рассказано в статье “Центрирование DIV по горизонтали и вертикали”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.parentDiv{ /* Absolute and Fixed positioning would work as well: */ position:relative; } .absoluteDiv{ /* Displaying the div 50px from the right and 90px from the top of its parent because of the explicit positioning */ position:absolute; right:50px; top:90px; } |
Применение
С помощью этих свойств можно построить дизайн любой сложности (с наложением слоев, блоков), который поднимет ваш сайт на новый уровень. А если еще использовать и свойство z-index, ты вы сможете менять стандартные правила наложения, перекрывающихся элементов. Но об этом по подробней в другой раз.
