Триколор 

Какое значение не может принимать свойство position. Почему Position Relative заслуживает особого внимания? Любопытные факты и примечания

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

Специфика построения потока документа

работает с потоком веб-страницы. Как это понять? По умолчанию все элементы страницы располагаются в том порядке, в котором вы создали их в html- разметке. Если тег header расположен над тегом footer, то и на странице он будет отображаться выше. И наоборот, если вы почему-то решите разместить footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». При этом блочные элементы занимают всю доступную для них ширину. Строчные, в свою очередь, располагаются в одну строку, пока не займут ее всю, а потом начнут переноситься на новую. Этот порядок именуется «потоком документа».

Для изменения поведения потока используется свойство Position в CSS . Также он может меняться из-за свойства float, но его мы рассматривать не будем. С помощью позиционирования можно заставить элемент «выпасть» из обычного потока, после чего он начнет вести себя по-новому. Как именно - зависит от использованного значения свойства.

CSS Position: static

Position: static, или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. В обычных условиях вам не придется иметь с ним дело. Если для какого-нибудь блока или строки не задано вообще никакого позиционирования, значит, оно имеет значение static. На странице такой компонент отображается в соответствии с потоком. Если указать ему свойства right/left или top/bottom, никакого эффекта не будет.

CSS Position: fixed

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

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

CSS Position: relative

Использование этого свойства называется относительным позиционированием . Если задать элементу свойство Position : relative, тот останется на своем месте. На первый взгляд, ничего особенного не произойдет, но все измениться, если дополнительно использовать свойства right/left и top/bottom. С их помощью можно управлять перемещением компонента относительно его местоположения. На том месте, где блок или строка были раньше, окажется пустое пространство - другие элементы останутся на своих положениях, не обращая внимания на освободившееся место .

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

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

Один из самых интересных и наиболее часто используемых вариантов. При использовании свойства Position со значением absolute положение компонента страницы будет высчитываться относительно окна браузера. Прочие элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. Казалось бы, все точно так же, как в случае с Position : fixed, но есть и серьезные различия.

Во-первых, положением элемента можно свободно управлять - для этого используются свойства top/right/bottom/left. Например, если вы зададите значение bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. Во-вторых, при скроллинге «абсолютный» компонент останется на своем месте, вместо того, чтобы перемещаться со страницей.

Взаимодействие абсолютных блоков с родительскими элементами

Можно добиться еще более точного контроля над абсолютно позиционированным компонентом. Для этого нужно задать его родителю свойство Position : fixed, relative или absolute.

Рассмотрим пример. У вас есть div с классом relative-div, внутри которого размещается div с классом absolute-div. Задаем внутреннему блоку свойство Position : absolute. Тот сразу же «вылетает» из потока и оказывается где-то вверху, ведь теперь его расположение просчитывается относительно окна браузера. Теперь задаем блоку с классом relative-div свойство Position : relative и «блудный сын» возвращается на место. Почти. На самом деле, он оказывается в верхнем левом углу родительского элемента.

Почему так происходит? Дело в специфике свойства Position : absolute. По умолчанию его положение зависит от окна браузера, но если «родитель» тоже позиционирован как-то кроме static, позиция начинает зависеть от родительского элемента. Это очень удобно, потому что можно разместить компонент в любом месте, не просчитывая огромные цифры относительно окна браузера. Прием часто используется для размещения иконок, кнопок и других небольших элементов.

Одна из главных трудностей новичков состоит в том, чтобы центрировать элемент вертикально и горизонтально. Грамотно используя свойство Position , сделать это проще простого. CSS Position: absolute по центру устанавливается следующим образом. Допустим, у вас есть d iv с классом absolute-div, который находится в «диве» с классом relative-div. «Родитель» позиционирован относительно и его ширина равна ширине всей страницы. «Потомок» имеет ширину и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента.

Все, что нужно сделать - это задать абсолютному компоненту top: 50 % и left: 50 %. Почти готово! Absolute-div сдвинулся с места и оказался почти в центре, но не совсем. Середины «родителя» касаются его края, а нам нужно, чтобы в центре блока оказался центр «потомка». Для этого нужно задать ему margin-left и margin-right со значениями -200 px. Тем самым мы сместим абсолютно позиционированный блок на половину его высоты и ширины. Все, он в центре!

Перекрывание компонентов

Проблемой может стать непростое, на первый взгляд, «наложение» позиционированных элементов на их «соседей». Например, компонент с Position : fixed будет перекрывать все, что расположено на странице. Исправить ситуацию можно с помощью свойства z-index, однако помните, что оно работает только для позиционированных элементов. Соответственно, если вы хотите размещать блок поверх фиксировано позиционированного элемента, этому блоку придется также задать позиционирование. Например, относительное.

Л учший способ освоить позиционирование - рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. Постарайтесь научиться использовать его в сочетании с функцией calc() - это даст возможность более гибко настраивать расположение. Однако помните, что это свойство не предназначено для выстраивания всей «сетки» страницы. С его помощью нужно перемещать относительно небольшие элементы, иначе можно слишком легко запутаться.

Они работают со всеми позиционированными элементами, кроме статических.

Пример позиционирования.

Элементы могут перекрывать друг друга! Отображение элемента над остальными!

Свойство position имеет 4 значения: static , fixed , relative и absolute . Каждое из этих значений будет продемонстрировано ниже с примером использования.

Перед тем как подробно разобрать все виды позиционирования элементов на странице, нам придется рассмотреть, что такое поток документа.

Поток документа

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

С помощью свойства float или position можно убрать элемент из нормального потока. Если элемент "выпадает" из нормального потока, то элементы, которые расположены в коде ниже этого элемента будут смещены на его место на веб-странице.

Статическое позиционирование

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

При применении CSS свойств top , left , right или bottom к статически позиционированному элементу, они будут игнорироваться.

Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static:

Название документа p { position: static; }

Первый абзац.

Второй абзац.

Попробовать »

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

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

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

Название документа img { position: fixed; top: 5%; left: 40% } Текст Текст Текст Текст Текст Текст Текст Какой-то текст Текст Текст Текст Текст Текст Попробовать »

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

Элементы с относительным позиционированием, как и статические элементы, остаются в общем потоке. При применении свойств top , left , right или bottom к относительно позиционированным элементам, они будут смещаться относительно своего местоположения, оставляя пустое пространство там, где элемент располагался изначально.

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

Название документа h2 { position: relative; top: 30px; } Заголовок первого уровня. Относительно позиционированный заголовок. Заголовок третьего уровня. Попробовать »

Примечание: элементы с относительным позиционированием (relative) обычно используют в качестве родителя для элементов с абсолютным позиционированием (absolute).

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

Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top , left , right или bottom .

Все абсолютно позиционированные элементы размещаются относительно окна браузера или относительно ближайшего позиционированного предка (если он есть), у которого свойство position имеет значение absolute , fixed или relative .

Название документа img { position: absolute; right: 0px; top: 0px; }

Изменим расположение логотипа с помощью абсолютного позиционирования.
Теперь логотип будет располагаться в правом верхнем углу страницы.

Попробовать »

Перекрывающие элементы

Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index , чем больше его значение, тем выше будет элемент.

Название документа div { position: absolute; width: 100px; height: 100px; } .div1 { background-color: #66FFFF; left: 70px; top: 0px; z-index: 1; } .div2 { background-color: #FFFF66; left: 0px; top: 30px; z-index: 0; } .div3 { background-color: #66FF66; left: 33px; top: 60px; z-index: 2; } z-index: 1; z-index: 0; z-index: 2;

Влад Мержевич

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

Благодаря комбинации свойств position , left , top , right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.

Нормальное позиционирование

Если для элемента свойство position не задано или его значение static , элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.

Свойства left , top , right , bottom если определены, игнорируются.

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

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position . Координаты указываются относительно краёв окна браузера, называемого «видимой областью» (рис. 3.42).

Рис. 3.42. Значения свойств left, right, top и bottom при абсолютном позиционировании

Для режима характерны следующие особенности.

  • Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.
  • Слой не меняет своё исходное положение, если у него нет свойств right , left , top и bottom .
  • Свойства left и top имеют более высокий приоритет по сравнению с right и bottom . Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom .
  • Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top , только слой уйдёт за верхний край.
  • Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top , только речь пойдёт о вертикальной полосе прокрутки.
  • Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top , bottom и height .
  • Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto . Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left , right для ширины и top , bottom для высоты (пример 3.31).

Пример 3.31. Создание аналога фреймов

Абсолютное позиционирование body { margin: 0; } #sidebar, #content { position: absolute; } #sidebar, #content { overflow: auto; padding: 10px; } #header { height: 80px; /* Высота слоя */ background: #FEDFC0; border-bottom: 2px solid #7B5427; } #header h1 { padding: 20px; margin: 0; } #sidebar { width: 150px; background: #ECF5E4; border-right: 1px solid #231F20; top: 82px; /* Расстояние от верхнего края */ bottom: 0; /* Расстояние снизу */ } #content { top: 82px; /* Расстояние от верхнего края */ left: 170px; /* Расстояние от левого края */ bottom: 0; right: 0; } Плов народов мира

Плов по-фергански

Плов узбекский

Плов сибирский

Плов итальянский

Плов эстонский

Плов по-американски

Плов по-индейски

Плов по-фергански

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

Засыпать ровным слоем рис, усилить огонь и тотчас налить воду, чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов при помощи шумовки собрать к середине горкой, проколоть палочкой в нескольких местах так, чтобы вода, находящаяся на поверхности, прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.

Тщательно перемешайте готовый плов, переложите в большое блюдо, сверху разложите мясо.

Результат данного примера показан на рис. 3.43. Слой header выводится в потоке как обычно, а для слоёв sidebar и content установлено абсолютное позиционирование.

Рис. 3.43. Применение абсолютного позиционирования

В браузере IE6 для абсолютно позиционированных элементов нельзя одновременно задать свойства left , right и top , bottom .

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

Для начала создадим пустой слой с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых свойства - position со значением absolute , display со значением none скрывает слой и width задаёт ширину слоя с подсказкой. Остальные свойства используются по желанию разработчика и предназначены для изменения оформления слоя (пример 3.32).

Пример 3.32. Стиль для всплывающей подсказки

#floatTip { position: absolute; /* Абсолютное позиционирование */ width: 250px; /* Ширина блока */ display: none; /* Прячем от показа */ border: 1px solid #000; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ font-family: sans-serif; /* Рубленый шрифт */ font-size: 9pt; /* Размер шрифта */ color: #333; /* Цвет текста */ background: #ECF5E4; /* Цвет фона */ }

Сам скрипт состоит из двух функций - moveTip() отслеживает движение мыши и в соответствии с координатами курсора меняет положение слоя, и toolTip() управляет видимостью слоя и выводит в нём желаемый текст (пример 3.33).

Пример 3.33. Скрипт для вывода слоя

Document.onmousemove = moveTip; function moveTip(e) { floatTipStyle = document.getElementById("floatTip").style; w = 250; // Ширина слоя // Для браузера IE if (document.all) { x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; // Для остальных браузеров } else { x = e.pageX; // Координата X курсора y = e.pageY; // Координата Y курсора } // Показывать слой справа от курсора if ((x + w + 10) < document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега . Окончательный код показан в примере 3.34.

Пример 3.34. Создание всплывающей подсказки

Всплывающая подсказка #floatTip { position: absolute; width: 250px; display: none; border: 1px solid #000; padding: 5px; font-family: sans-serif; font-size: 9pt; color: #333; background: #ECF5E4; opacity: 0.85; /* Прозрачность слоя */ }

" + "Объектив: Canon EF 24-105 f/4L IS USM
" + "Вспышка: Canon Speedlite 580 EX
" + "Выдержка: 1/125
Диафрагма: 5.6")" onmouseout="toolTip()" />

Результат данного примера показан на рис. 3.44. Обратите внимание, что переносы текста при вызове функции toolTip() сделаны для удобства восприятия и имеют синтаксис JavaScript. В Safari скрипт иногда не работает при переносе текста, в этом случае текст следует записать в одну строку. К стилям добавлено свойство CSS3 opacity , которое добавляет для слоя небольшую прозрачность. В IE до версии 9.0 это свойство не поддерживается.

Рис. 3.44. Всплывающая подсказка, выводимая с помощью JavaScript

Фиксированное положение

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.

Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на странице и всегда видны посетителю. В примере 3.35 показано добавление подвала, который остаётся на одном месте независимо от объёма информации на сайте.

Пример 3.35. Фиксированный подвал

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Фиксированный подвал BODY { margin-bottom: 50px; } #footer { position: fixed; /* Фиксированное положение */ left: 0; bottom: 0; /* Левый нижний угол */ padding: 10px; /* Поля вокруг текста */ background: #39b54a; /* Цвет фона */ color: #fff; /* Цвет текста */ width: 100%; /* Ширина слоя */ } Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Автор не гарантируют вашей безопасности при их использовании и снимает с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное! Влад Мержевич

Результат примера показан на рис. 3.45. Поскольку фиксированный подвал накладывается на текст и скрывает его, добавлен отступ снизу для селектора BODY . Браузер IE6 не поддерживает значение fixed , поэтому в нём данный пример будет работать некорректно.

Рис. 3.45. Подвал внизу страницы

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

Если задать значение relative свойства position , то положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное - сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 3.46), отрицательное - сдвиг вверх.

Рис. 3.46. Значения свойств left и top при относительном позиционировании

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

Рис. 3.47. Значения свойств right и bottom при относительном позиционировании

Для относительного позиционирования характерны следующие особенности.

  • Этот тип позиционирования не применим к элементам таблицы вроде ячеек, строк, колонок и др.
  • При смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами.

В примере 3.36 показан сдвиг текста заголовка вниз для придания ему особого стиля написания.

Пример 3.36. Заголовок текста

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Заголовок H1 { font: bold 2em Arial, Tahome, sans-serif; /* Параметры шрифта */ color: #fff; background: #375D4C; padding: 0 10px; } H1 SPAN { position: relative; /* Относительное позиционирование */ top: 0.3em; /* Сдвигаем вниз */ } Аз и буки шрифтовой науки

Шрифт это средство выражения дизайна, а не какого-то банального чтения.

Результат данного примера показан на рис. 3.48.

Рис. 3.48. Сдвиг текста относительно исходного положения

Вложенные слои

Обычно относительное позиционирование само по себе применяется не часто, поскольку есть ряд свойств выполняющих фактически ту же роль, к примеру, тот же margin . Но сочетание разных типов позиционирования для вложенных слоёв является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative , а для дочернего absolute , то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 3.49).

Рис. 3.49. Значения свойств left, right, top и bottom во вложенных слоях

Отсчёт координат ведётся от внутреннего края границы, значения полей не учитываются. В следующем примере текст располагается в правом нижнем углу слоя возле границы, игнорируя свойство padding .

Текст