Свойство 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 не работает, если документ находится в режиме совместимости.
Здравствуйте, уважаемые читатели блога сайт! Настало время дополнить новыми полезными материалами и сегодня мы познакомимся с тем, каким образом можно разнообразить размещение различных элементов на странице, применив для них свойство позиционирования 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 добавлять не будем:
Чуть выше я уже сказал, что отсутствие 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: absolute | fixed | relative | static | inherit
Значения
absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left , top , right и bottom , также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed , relative или absolute , то отсчет координат ведется от края родительского элемента. fixed По своему действию это значение близко к absolute , но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. static Элементы отображаются как обычно. Использование свойств left , top , right и bottom не приводит к каким-либо результатам. inherit Наследует значение родителя.HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства position
Объектная модель
document.getElementById("elementID ").style.position
Браузеры
Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit .
Свойство CSS position отвечает за месторасположения элемента относительно других элементов. Используется в стилях довольно часто и поддерживается всеми браузерами (Internet Explorer, Netscape, Opera, Safari, Mozilla, Firefox, Chrome, Яндекс Браузер). Приведем простенький пример для понимания.
Примера 1 . HTML-код:
Обычный текст Этот текст ниже на 10 пикселей А этот наоборот выше
После того, как Вы откроете этот пример в окне браузера, должно отобразиться примерно следующее:
Это самый простой пример использования свойства CSS position . Теперь давайте рассмотрим все возможные атрибуты, которые может принимать этот параметр.
Синтаксис CSS position
position : absolute | fixed | relative | static | inherit ;
Примечание: через | перечислены все его возможные значения. Рассмотри каждый параметр в отдельности
1. CSS position: relative
Свойство position: relative - относительное позиционирование. Мы видели пример использования этого элемента чуть выше.
При задании этого параметра, активизируются следующие параметры:
- bottom
- left
- right
Если не указано никаких смещений, т.е.
top : 0px ; bottom : 0px ; left : 0px ; right : 0px ;
то отображение html-элемента происходит на том же месте как и по умолчанию (т.е. без задания relative). Если же указаны смещения, то элемент будет смещен относительно своего расположения либо ниже, выше, левее или правее. При этом другие окружающие элементы считают, что никакого смещения нету. Короче говоря, использовать relative имеет смысл только если мы задали смещения.
Для пояснения этой особенности приведем пример.
Примера 2 . HTML-код:
В чем же тогда разница?...
Примера 2* . Добавим к первому диву: position: relative; . HTML-код:
В чем же тогда разница? ...
Код преобразуется в следующее:
Наш красный квадрат переместился на 200 пикселей влево и на 100 пикселей вниз и частично своей площадью закрыл текст. При этом то место, где должен был наш квадрат текст по-прежнему его огибает как будто он там есть.
2. CSS position: absolute
Свойство CSS position: absolute - в данном случае считается, что начало отсчета - левый верхний угол. Здесь также действуют свойства top , bottom , left , right . При этом элемент который обладает атрибутом absolute становится как бы блочным элементом. Приведем пример.
Примера 3 . HTML-код:
Текст один Текст два Текст три
Код преобразуется в следующее:
В данном случае все три текста написаны друг за другом. Заметим, что мы специально сделали отступ слева padding-left:100px; в 100 пикселей. Теперь рассмотрим, что будет если мы во второй font добавим атрибут position: absolute .
Примера 3* . HTML-код:
Текст один Текст два Текст три
Код преобразуется в следующее:
Заметим, что текст два уехал влево и теперь стоит на первой позиции. При этом текст три занял место второго. Почему так произошло? Потому что мы добавили position:absolute и отступ слева: left:0px . Как я писал выше, при атрибуте absolute начало отсчета для элемента становится - левый верхний угол.
3. CSS position: fixed
Свойство CSS position: fixed - фиксированное расположение элемента, даже при прокрутке скролла. Пожалуй, это один из самых распространенных вариантов использования position. Если при этом заданы параметры top и left, то элемент будет размещен относительно левого верхнего угла. Если же параметры не указаны, то он будет фиксироваться в таком положении, как он встретиться на странице. Приведем пример.
Примера 4. HTML-код:
Фиксированный текст
Тут идет текст текст текст
Тут идет текст текст текст ...
Код преобразуется в следующее:
В данном примере верхняя строчка с текстом "фиксированный текст" всегда видна на странице браузера в любом положении скролла. Это свойство часто используют сайты, которые размещают рекламные строчки типо NOLIX, DAOS и т.п. См. как сделать строку как NOLIX и DAOS .
4. Остальные значения CSS position
4.1. Свойство position: static - этот параметр стоит по умолчанию. Параметры left, top, right и bottom не работают при этом значении.
4.2. Свойство position: inherit - наследование значение родителя. Т.е. смотрится ближайший элемент, в который заключен этот html-элемент и наследуется его значение.
Для обращения к position из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.position ="VALUE "
Свойство position
имеет следующие значения
static relative absolute fixed
Только совместно с ним применяются свойства (искл. position: static;)
top bottom right left
Одновременно могут присутствовать
margin transform float (искл. position: absolute; и position: fixed;)
Добавить пустой тег перед div с class="primer" - .
Введение
Элементы на веб-странице занимают определённое пространство. По аналогии с корабликами в игре "Морской бой". Между кораблями должны быть пустые клеточки - margin.
Для того, чтобы один элемент поместить поверх другого, нужно задать отрицательное значение для margin. Но тогда содержимое тегов будет накладываться друг на друга. С помощью свойств position и они как бы приподнимаются на уровень 2.
В естественном порядке нижние теги в коде показаны над верхними. Благодаря z-index на уровне 2 можно самим определить видимый элемент.
Статического позиционирование - position: static;
position: static используется по умолчанию и отменяет действие relative, absolute и fixed. Значения свойств top, bottom, right, left игнорируются. При отсутствии transform не учитывается и z-index.
Относительное позиционирование - position: relative;
Тому блоку, которому мы присвоим position: relative будет отдан приоритет. Содержимое нижнего элемента скрывается.
Для того, чтобы расположить блок Б поверх В, но ниже А, недостаточно присвоить и ему position: relative, поскольку в коде он стоит ниже блока А, а значит будет его перекрывать.
Нужно задать для элемента Б ещё и z-index меньше, чем у блока А.
Вместо margin при относительном позиционировании иногда лучше использовать свойства top, bottom, right, left. Точкой отсчёта для них является исходное положение элемента. При этом блок Б продолжает располагаться так, словно блок А находится на прежнем месте - он оставляет для него пустое пространство. Поэтому можно не колдовать с пустым div ().
Полная аналогия со свойством
Для встроенных элементов
Встроенные элементы margin не смещает вниз и вверх (). Только top, bottom
Б А Б
Абсолютное и фиксированное позиционирование
Казалось бы, что блок с position: absolute должен находиться выше position: relative, но это нет так, тут действует естественный порядок. А значит z-index позволит между ними выбрать приоритетный элемент.
Блок В игнорирует исходное положение блока Б, поскольку при position: absolute и position: fixed элемент перестаёт влиять на соседние теги ни посредством своей ширины/высоты, ни посредством float: left.
Итоговая таблица
| отличительные свойства | position: static; | position: relative; transform: translate(); | position: absolute; | position: fixed; |
| наложение | элементы лучше не помещать друг на друга | элементы имеет приоритет видимости над static. Другие значения равнозначны. Видимым будет тот, кто ниже находится в коде, либо обладает большим значением z-index | ||
| точка отсчёта top, right, bottom и left | игнорируются | исходное положение элемента | край родительского элемента | край окна браузера |
| элементы вокруг | учитывают текущее положение элемента | учитывают исходное положение элемента | игнорируют положение элемента | |
| width: 100%; это ширина | элемента (для встроенного)/родительского элемента (для блочного) | родительского элемента с position не в значении static | окна браузера | |
| при прокрутки страницы элемент | перемещается | "прилипает" к заданному месту окна браузера | ||
А теперь для закрепления материала пощёлкайте по кнопкам в начале статьи, подумайте почему произошли именно такие изменения.
