Смарт ТВ 

Что значит position relative. Позиционирование HTML элементов в CSS при помощи свойства position (absolute, relative, fixed, static). Относительно позиционированный заголовок

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

Также в рамках озвученной выше темы рассмотрим, как можно задавать тот или иной отступ вправо, влево, вверх или вниз посредством использования соответствующих свойств left, right, top и bottom путем присвоения им нужных числовых значений.

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

Определение позиции элемента и нормальное позиционирование (position static)

Для свойства position существует четыре значения (static | relative | absolute | fixed) , которые и определяют способ позиционирования. Как вы, наверное, знаете, параметры практически всех CSS правил можно почерпнуть с официальной странички спецификации W3 , где представлен полный набор свойств и их значений, в том числе position:


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

При помощи position и упомянутых мною выше left, right, top, bottom (отступы соответственно влево, вправо, вверх, вниз) можно регулировать положение элементов один относительно другого, фиксировать их в определенном месте или даже производить наложение одного элемента на другой.

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

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

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

Position absolute (абсолютное позиционирование)

Итак, продолжим разбор технических нюансов абсолютным позиционированием, которое определяется параметром absolute свойства position:

Position: absolute

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


Здесь A, B, C и D - числовые величины отступов. Теперь разберем особенности значения absolute на конкретном примере. Возьмем 2 с соответствующими , которым пропишем параметры (цвет фона), width (ширину) и height (высоту). Для простоты воспользуемся , который реализуется при помощи атрибута style.

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

Позиционирование элементов HTML

Чуть выше я уже сказал, что отсутствие position по умолчанию равнозначно тому, что для этого свойства указан параметр static. То есть отображение всех элементов происходит в обычной последовательности. Соответственно в нашем случае контейнеры будут располагаться по порядку (в стандартном HTML потоке):


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


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

А в этом случае после применения к нему параметра absolute вебэлемент остается на месте, в то время как его сосед (в нашем примере нижний подкрашенный блок) перемещается вверх. В результате осуществляется наложение одного элемента на другой. Попробуем теперь указать отступ слева для абсолютно позиционированного вебэлемента left:0, в результате получаем вот что:


Итак, если указать в качестве отступа нулевое значение, то вебэлемент с параметром позиционирования absolute выйдет за пределы родителя и прилипнет к краю окна браузера. В зависимости от заданного свойства (left, right, top, bottom) это будет левый, правый, верхний или нижний предел.

Причем необходимо отметить, что left имеет преимущество перед right, а top перед bottom. Если они входят в конфликт друг с другом, то значения соответственно right и bottom игнорируются. Идем далее. Следующим шагом пропишем положительное значение для left верхнего контейнера:


В этом случае произойдет смещение вправо от левого края области просмотра, которая определяется тегом HTML документа. Давайте систематизируем и отметим по пунктам некоторые особенности поведения вебэлемента при присвоении ему position absolute:

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

Думаю, я все разложил по полочкам что касается абсолютного позиционирования и вы можете сами определить, какое практическое применение может быть у элементов с таким свойством. Впрочем, в виде информации скажу, что при помощи свойства position со значением absolute можно создать блоки с фреймами, добавив правило overflow с параметром auto. Также существует возможность получить всплывающие подсказки для фото или изображений.

Position relative (относительное позиционирование)

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


Для примера, который поможет наглядно продемонстрировать действие данной разновидности свойства position, возьмем два контейнера, один из которых с помощью свойства float:left загоним влево, а текстовое содержание второго контейнера будет обтекать этот блок. Для наглядности придадим фон этим элементам, размеры с помощью width и height, а также необходимые отступы посредством свойства margin:

Текст...

Выглядеть это будет так:


Теперь добавляем к правилу CSS для первого блока position relative, а также смещения вправо (left) и вниз (top) для того, чтобы относительное позиционирование дало результат:

Текст...

В итоге результирующий вид будет таким:


Как видите, произошло смещение блока по заданным параметрам. Однако, соседний элемент не отреагировал на это и текст по-прежнему обтекает перемещенный контейнер как если бы тот оставался на своем прежнем месте.

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

Совместное использование position absolute и relative

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


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


Для реализации задачи я поступил следующим образом. Вначале прописал в STYLE.CSS своей темы relative для свойства position классу «site-header» родительского тега HEADER:

Также для корректного вывода мне пришлось определить ширину блока с классом «site-description», указав значение width:


Затем для класса «site-branding» дочернего контейнера DIV я указал абсолютное позиционирование и прописал отступы left и top, которые будут определять местоположение элемента в этом случае не в абсолютном исчислении (применительно к окну браузера), а относительно расположения родителя.

Также необходимо было удалить из набора правил CSS для этого тега свойство «text-align:center», чтобы выровнять текст заголовка и дескрипшн по левому краю. В результате такого взаимодействия относительного и абсолютного позиционирования задача была решена и нужный текст в виде заголовка и описания блога был наложен на изображение шапки:


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

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

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

Ну и последний параметр свойства position помогает фиксировать нужные вебэлементы на странице. В принципе этот вид позиционирования очень похож на абсолютное с той лишь разницей, что элемент с прописанным значением fixed привязан к определенной области на экране в окне браузера посредством left, right, top, bottom. Он остается на месте даже при прокрутке страницы.

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

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

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

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

Если элемент указан как позиционируемый, то его положение было изменено со статического на одно из четырех возможных значений свойства background position CSS : relative , absolute , fixed , sticky .

В дополнение к пяти упомянутым значениям, в CSS3 были добавлены еще два новых значения свойства: page и center .

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

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

Относительно позиционируемый элемент (position: relative ) устанавливает положение своих абсолютно позиционируемых потомков, а также задает свое положение. Это значит, что вы можете сдвинуть элемент от его первоначальной позиции с помощью свойств смещения. Точкой отсчета для элемента в этом случае является его первоначальное положение на странице относительно левого верхнего угла:

Относительно позиционируемый элемент сдвигается от своей первоначальной позиции после применения к нему свойства position: relative . Пунктирный квадрат отображает первоначальное положение элемента на странице. Элемент сдвинут на 35 пикселей вниз и 35 пикселей вправо относительно исходной позиции.

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

Когда элемент позиционируется абсолютно (position: absolute ), он может быть размещен относительно другого элемента на странице. Элемент, относительно которого он размещается, должен иметь уже заданную позицию.

С помощью CSS position relative абсолютно позиционируемый элемент располагается по отношению к относительно позиционируемому элементу (position: relative ). Началом системы координат является левый верхний угол относительно позиционируемого элемента.

Например, следующее изображение демонстрирует элемент, который размещен статически. Розовый квадрат при этом смещен влево при помощи свойства float так, чтобы текст обтекал его:


Статически позиционируемый элемент

Серый контур показывает границу контейнера розового квадрата. Для контейнера было установлено position: relative , поэтому он задает контекст позиционирования для розового квадрата. После того как розовый квадрат позиционирован абсолютно, он удаляется из потока страницы и текст распределяется так, как будто квадрата никогда и не было в потоке:


Розовый квадрат позиционируется абсолютно относительно своего родителя (серые границы ). Он располагается: top: 30px , right: 40px .

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

Элемент с CSS position fixed располагается относительно области просмотра. Он обладает тем же поведением, что и абсолютно позиционируемые элементы: удаляется из потока страницы и больше не влияет на разметку. Но вместо того чтобы позиционироваться относительно какого-либо элемента на странице, он располагается относительно области просмотра и не зависит от прокрутки: он зафиксирован в области просмотра в позиции, заданной с помощью свойств смещения.

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

Значение свойства sticky , center и page на данный момент все еще являются экспериментальными со слабой поддержкой.

Элемент с «прилипающим » позиционированием (position: sticky ) рассматривается как гибрид относительного и фиксированного элементов. Например:

Element { position: sticky; top: 70px; }

Заданный элемент будет вести себя так, как если бы он имел position: relative , пока область просмотра не достигнет во время прокрутки точки в 10 пикселей от верхней границы области просмотра. Если элемент находится выше, то он зафиксируется в 70 пикселях от верхней части, пока прокрутка браузера не достигнет порогового значения.

«Прилипающий » эффект обычно создается с помощью JavaScript , и как только значение sticky станет поддерживаться всеми браузерами, то его можно будет воспроизвести, используя CSS .

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

Значение center используется для центрирования элемента внутри другого элемента. Центрированный элемент будет размещен в центре контейнера и удален из «стека » элементов страницы. Можно воспользоваться свойствами смещения, чтобы сдвинуть элемент с его центрированной позиции.

Поведение значения page свойства position до сих пор неясно. Оно связано с постраничным выводом и контейнерами, созданными с помощью CSS Regions .

Любопытные факты и примечания

Элементы с CSS position absolute , использующие свойства смещения, могут иметь отступы (margins ),которые размещаются внутри контекста позиционирования.

Абсолютно позиционируемый элемент займет столько горизонтального и вертикального пространства, сколько потребуется для его контента. Его можно растянуть, и он заполнит ширину своего контейнера. Для этого нужно оставить его ширину (width ) неопределенной и расположить его левую границу на левой границе родителя, а правую границу – на правой границе родителя, используя свойства смещения right и left :

position: absolute; left: 0; right: 0;

Аналогично абсолютно позиционируемый элемент может быть растянут вертикально с помощью свойств top и bottom :

position: relative; top: 0; bottom: 0;

В случае, когда высота и ширина элемента при CSS абсолютном позиционировании определены, то:

  • если оба свойства top и bottom определены, то top имеет большую силу;
  • если right и left определены, left выигрывает;
  • если свойство direction имеет значение rtl (например, арабский ), то «побеждает » right.

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

Официальный синтаксис

Синтаксис:

position: static | relative | absolute | sticky | center | page | fixed

Начальное значение: static .

Применимо: все элементы.

Использование в анимациях: нет.

Значения static

Алгоритм CSS позиционирования по умолчанию. Блок располагается в соответствии с нормальным потоком. Свойства top, right, bottom и left не применяются.

relative

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

Эффект применения свойства position: relative к табличным элементам:

  • table-row-group , table-header-group , table-footer-group и table-row смещаются относительно своей нормальной позиции в пределах таблицы. Если ячейки таблицы объединяют несколько строк, то смещаются только ячейки относительно позиционированной строки;
  • table-column-group , table-column не смещают соответствующий столбец, когда применено свойство position: relative ;
  • table-caption и table-cell смещаются относительно нормальной позиции внутри таблицы. Если ячейка таблицы занимает несколько столбцов или строк, то смещается вся составная ячейка.
absolute

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

sticky

Позиция блока рассчитывается согласно нормальному потоку (как position: relative ). Блок смещается и фиксируется относительно области просмотра и внешнего блока, и во всех случаях, включая табличные элементы, он не влияет на положение последующих элементов. Когда элемент позиционирован «прилипанием», положение следующего элемента задается без учета смещения. Эффект от применения position: sticky к табличным элементам такой же, как и от position: relative .

center

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

page

Позиция блока рассчитывается в соответствии с абсолютной моделью. В случае размещения внутри региона внешним блоком всегда является начальный контейнер.

Как и в абсолютной модели, отступы блока не перекликаются с какими-либо другими отступами.

Примеры

Parent { position: relative; } .child { position: absolute; top: 10px; left: 30px; } /* Заголовок остается на виду при прокручивании области просмотра */ header { position: fixed; top: 0; left: 0; right: 0; } /* Этот элемент становится зафиксированным, как только его положение относительно вершины области просмотра станет меньше или равно 100 пикселям */ .sticky { position: sticky; top: 100px; }

Демо

Следующее демо содержит демонстрацию работы четырех основных значений позиционирования: relative , absolute , fixed и даже sticky :

Посмотреть демо

Поддержка браузерами

Свойство position работает во всех основных браузерах: Chrome , Firefox , Safari , Opera , Internet Explorer , а также на Android и iOS .

Но поддержка значений fixed и sticky различается среди браузеров. Вот таблицы совместимости для этих двух значений:

В Internet Explorer фиксированное позиционирование в CSS не работает, если документ находится в режиме совместимости.

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о принципах позиционирования Html элементов с помощью CSS правил Position (со значениями absolute, relative и fixed) и свойств, задающих смещение left, right, top и bottom. Видите звездочку в левом нижнем углу? Дочитав статью до конца, вы узнаете как она туда попала.

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

Position relative — относительное позиционирование

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

У него имеется четыре возможных значения (static | relative | absolute | fixed). Откуда мы это можем узнать? Ну, конечно же, из спецификации , которая выложена на официальном сайте :

По умолчанию используется значение position: static . Т.е. в нормальном потоке два CSS правила, способных его разорвать, имеют значения по умолчанию static и float:none. Как только одно из этих значений изменится — нормальный поток Html кода в этом месте будет нарушен, потому что теперь этот тег может совершенно по-другому взаимодействовать со своими соседями или вообще даже не взаимодействовать.

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

По умолчанию для всех четырех используется значение Auto. Когда мы прописываем для какого-либо тега правило position: relative, то значения отступов со всех сторон сбрасываются в ноль и вам предоставляется возможность самим задать их.

Нужно понимать как задаются отступы . Например, left: 400px означает отступ от левой стороны вправо на соответствующую величину, а top: 100px — от верхней стороны вниз. Если укажите отрицательные значения Left, right, top и bottom, то элемент будет двигаться в противоположную сторону (например, top — наверх, а Left — влево).

Давайте рассмотрим использование relative для плавающего элемента. Пусть у нас имеются два Div контейнера, которые мы подкрасим для наглядности разным цветом фона с помощью .

Первый контейнер мы изначально заставим плавать влево с помощью соответствующего свойства, а т.к. он будет пустой, то мы зададим ему (и отступы с помощью margin):

text text ...

В результате мы получим примерно такую картину маслом:

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

Теперь давайте добавим к CSS правилам для первого контейнера position: relative и зададим отступы слева и сверху с помощью Left и top:

text text ...

В результате мы увидим, что наш плавающий элемент сдвинулся в соответствии с заданными отступами:

Обратите внимание, что текст по-прежнему продолжает его обтекать так, как будто бы он все еще стоит на своем месте. Т.е. многие Html теги при своем построении считают, что он находится на своем законном месте (без учета заданных нами в правилах Left и top сдвигов).

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

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

Position absolute — абсолютное позиционирование в CSS

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

Но сначала посмотрим на эту конструкции еще без добавления «position: absolute». При этом для подчеркивания строчности Span добавим ему высоту, которая все равно не применится, а CSS код на сей раз добавим для разнообразия не через внутри конструкции Head:

#abs{ background:#FFC0C0; margin-left: 100px; } #abs span{ background:#C0FFC0; height:100px; } Первое второе и третье

Для Div мы еще и отступ слева задали в 100px. Ну, а теперь посмотрим, что же изменится, если мы зададим нашему строчному тэгу Span абсолютное позиционирование путем добавления CSS правила position absolute :

#abs span{ background:#C0FFC0; height:100px; position:absolute; }>

Произошло странное. Судя по тому, что к Span применилось свойство height:100px — он перестал быть строчным тегом. Потом у нас, очевидно, состыковались друг с другом фрагменты «первое» и «третье», как будто бы элемента со словом «второе» между ними уже не существует. Именно так и работает абсолютное позиционирование в CSS.

Но давайте разберем все по пунктам при задании элементу свойства «position: absolute» :

  • Тег, для которого прописывается это правило, становится блочным
  • Размеры этого блока будут определяться содержащимся в нем контентом (если вы не зададите их явно с помощью width и height).

    • Также как и для плавающих элементов (с прописанных Float), в случае применения к тегу «position: absolute», эффект Margin-colloapse для таких тэгов проявляться не будет. Т.е. ему никто не сможет передать свои вертикальные отступы и он никому передать их не сможет тоже (ни с кем не делится вертикальными отступами).

    Если вы вспомните предыдущую статью из рубрики « », то увидите, что все эти три пункта наблюдались и при создании плавающих элементов с помощью Float.

    Поэтому, если для какого-либо тега уже было задано Float, но затем для него же прописали «position: absolute», то первое браузером (именно он отвечает за разбор кода) сбрасывается в None (значение по умолчанию), ибо нет смысла реализовывать две одинаковых модели.

  • Тег с прописанным «position: absolute» не взаимодействует ни с какими другими элементами Html кода кроме ближайшего родителя с прокруткой. Все остальные теги в коде элемент с абсолютным позиционированием просто-напросто не замечают (и это видно из нашего примера)

    • Это все хорошо, но ведь с помощью «absolute» мы должны осуществлять абсолютное позиционирование. Ну, собственно, это так и есть на самом деле. В купе с ним мы можем использовать все те же четыре CSS правила: Left, right, top и bottom. Как они будут работать при абсолютном позиционировании?

    Они по-прежнему будут задавать смещение, но смещение уже не относительно текущего положения элемента, а относительно границ его контейнера.

    А само понятие контейнера для абсолютно спозиционированных элементов будет отличаться от общепринятого. Из предыдущих статей вы, наверное, помните, что контейнером для тега Html является область просмотра, а для всех остальных — область контента родителя. У тэга с прописанным position absolute это будет не так.

    Контейнер при абсолютном позиционировании мы сможем назначать сами (им будет первый из предков, у которого значение position отличается от static , используемого по умолчанию).

    Допустим, если мы задали только абсолютное позиционирование, но не прописали никаких значений для правил Left, right, top и bottom, то для них будет использоваться умолчательное значение Auto и такой элемент останется стоять на своем месте (как и у нас на последнем скриншоте). Тут должно быть все понятно.

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

    В нашем примере ни одному из предков тега Span мы не прописывали position, поэтому дойдя до самого верха (тэга Html) мы на этом и остановимся. Давайте зададим нулевые отступы для рассмотренного чуть выше примера и убедимся в своей правоте:

    #abs span{ background:#C0FFC0; height:100px; position:absolute; left:0; top:0; }>

    В итоге абсолютно спозиционированный тег прижался к нулевой точке отсчета области просмотра. Но мы вольны сами выбирать контейнер для элемента с прописанным position absolute . Как же это можно сделать?

    Связка position absolute и relative в Div верстке

    Ну, а почему бы для этого не использовать CSS правило «position: relative». Пропишем его в нужном теге предка (который станет в итоге контейнером для абсолютно спозиционированного элемента), а значения Left, right, top или bottom прописывать не будет, тем самым, фактически, вообще не внеся никаких изменений в положение данного предка (он останется в нормальном потоке), но назначив его контейнером и началом отчета для нашего абсолютного позиционирования.

    Если мы пропишем «relative» для тега Body, то наша картинка чуть-чуть изменится:

    Первое второе и третье

    Видите, появились характерные отступы говорящие о том, что теперь за точку отсчета берется левый верхний угол тэга Body. Помните, что в умолчательных значениях для этого тега прописаны отступы margin в 8 пикселей, которые мы и наблюдаем:

    А теперь давайте в дополнение к уже проделанному пропишем «position: relative» и для контейнера Div, внутри которого и живет тег Span:

    #abs{ background:#FFC0C0; margin-left: 100px; position: relative; } #abs span{ background:#C0FFC0; height:100px; position:absolute; left:0; top:0; } Первое второе и третье

    Как видим, картина поменялась. Несмотря на то, что relative прописано и для Body, и для Div, контейнером для абсолютно спозиционированного Span стал именно Div, т.к. он является первым предком , у которого значение position отлично от static.

    Причем, если мы пропишем для нашего Div еще и , то увидим, что в качестве контейнера при абсолютном позиционировании будет использоваться область контента с имеющимися внутренними отступами:

    #abs{ background:#FFC0C0; margin-left: 100px; position: relative; border:12px dotted #ccf; padding:20px; }

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

    Отступы (смещение) Left, right, top и bottom можно задавать не только в абсолютных единицах (читайте про ), но и в процентах, которые будут браться от ширины (left и right) и высоты (top и bottom) полученного контейнера. Т.е. «top:100%» будет соответствовать 100% высоты контейнера, а «left:100%» — 100% от его ширины.

    И именно описанное выше взаимодействие я имел в виду, говоря про связку position absolute и relative . У нас благодаря этому появляется возможность самим выбирать контейнер или же, другими словами, точку отсчета при абсолютном позиционировании. Для чего же на практике используют эту связку?

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

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

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

    Position fixed — привязка к области просмотра

    Последним способом позиционирования является «position: fixed» . Рассмотренные ранее способы были рассчитаны на размещение относительно каких-либо элементов Html кода. Но если мы начинаем прокручивать страницу, то и ее теги (даже имеющие абсолютное или относительное позиционирование) перемещаются вверх (или вниз).

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

    Для тэга с прописанным position:fixed контейнер никто не ищет, ибо им является сама область просмотра. Именно в этом заключается отличие от «absolute», а все остальное у них совпадает. Блоки с фиксированным размещением при прокрутке страницы ведут себя так, как будто это элементы интерфейса окна вашего браузера (они всегда под рукой).

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

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

    Удачи вам! До скорых встреч на страницах блога сайт

    посмотреть еще ролики можно перейдя на ");">

    Вам может быть интересно

    Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
    Float и clear в CSS - инструменты блочной верстки
    List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
    Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
    Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка

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

    Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство 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 .

    Текст