Веб-браузеры - это настоящие мастера порядка, чья главная задача заключается в аккуратном отображении html-элементов строго по установленным стандартам. Блочные элементы, такие как , , ведут себя весьма предсказуемо: они уверенно занимают всю доступную ширину и выстраиваются друг под другом вертикально. В свою очередь, строчные элементы, такие как , или проявляют более гибкий характер - они тянутся по горизонтали, пока не заполнят строку. После этого происходит перенос, и процесс начинается заново. Этот механизм известен нам всем как стандартный или нормальный поток элементов. Именно здесь на сцену выходит свойство position - ключевой инструмент для точного позиционирования. Оно позволяет контролировать расположение элемента относительно окна браузера, соседних объектов или текущего места в документе, придавая странице ту самую уникальность и структуру. Чтобы полностью раскрыть потенциал этого свойства, его часто комбинируют с , , и . Эти помощники отвечают за направление смещения, позволяя элемантам «танцевать» там, где вы их пожелаете. | Значение по умолчанию: | static | | Наследуется: | нет | | Версия: | CSS2 | | Синтаксис JavaScript: | object.style.position="absolute" | | Значение | Описание | | static: | Элемент отображается в том месте, в котором он располагается в потоке документа. Применение свойств top, left, right и bottom к элементу со статическим позиционированием не даст никакого эффекта. | | absolute: | Элемент с абсолютным позиционированием удаляется из потока документа и другие элементы смещаются на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно окна браузера. | | fixed: | Элемент с фиксированным позиционированием удаляется из потока документа и другие элементы смещаются на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно окна браузера. При прокрутке содержимого в окне браузера, элемент остаётся на месте, т.е. не прокручивается с остальным содержимым. | | relative: | Элемент с относительным позиционированием остаётся в потоке документа. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его текущей позиции, однако, так как элемент находится в потоке документа на его месте остаётся пустое пространство. | | inherit: | Указывает, что значение наследуется от родительского элемента. | Пример
|