Css свойство position

“Липкое” позиционирование

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

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

Sticky элемент «прилипает» к своему ближайшему предку с прокруткой, созданной при  равном , ,  или , даже если тот не является ближайшим фактически прокручивающим родителем.

Возьмем пример:

Здесь элемент будет располагаться относительно, пока при прокрутке области просмотра его положение не достигнет точки, в которой он будет находиться на расстоянии 30px от верха области просмотра. В этот момент он станет липким и остается в фиксированной позиции 30 пикселей вверху экрана.

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

See the Pen
position sticky by Андрей (@adlibi)
on CodePen.

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

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

Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. Для этого нужно записать:

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

Также может использоваться для вывода диалоговых окон — при этом фиксированное сообщение невозможно прокрутить вверх или вниз, оно всегда остаётся на своём месте.

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

Относительное позиционирование записывается так – position: relative. Изменяет положение элемента от его исходного расположения. Координаты задаются такими же свойствами, как и при абсолютном позиционировании — left, right, top, bottom. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остаётся место.

Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остаётся нетронутым. Блок можно двигать куда угодно, но место под него остаётся пустым и его не займут другие части.

Если элемент выходит за пределы окна браузера, то появится горизонтальная или вертикальная полосы прокрутки.

Помните, что смещение происходит не от краёв окна браузера, а от того места, где изначально стоял блок.

Допустим мы хотим сместить первый дочерний элемент влево и вниз.

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

Что такое относительное позиционирование CSS?

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

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

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

CSS

#first_element { 
  position: relative; 
  left: 30px; 
  top: 70px; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 
#second_element { 
  position: relative; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
}

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

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

Видео курсы по схожей тематике:

Photoshop. Базовый курс для web-разработчика

Сергей Воропаев

HTML5 и CSS3 Стартовый

Владимир Виноградов

Реализация Transform-потоков в Node.js

Алексей Орленко

Целесообразным применением данного типа позиционирования является создание меню, заголовков, неподвижных элементов, содержащих формы быстрой связи со службой поддержки (online chat). 

С использованием свойств positionfixed, top и left:

<html>

<head>                                             

    <title>Fixedtitle>

    <style type=»text/css»>

        div {

            width: 240px;

            height: 240px;

        }

        #redBox {

            background-color: red;

        }

        #greenBox {

            background-color: green;

        }

        #blueBox {

            background-color: blue;

        }

        #fixedBox {

            background-color: cyan;

            width: 200px;

            height: 200px;

            border-radius: 100px;

            position: fixed;

            top: 20px;

            left: 150px;

            opacity: 1.0;

        }

    style>

head>

<body>

    <div id=»redBox»>div>

    <div id=»greenBox»>div>

    <div id=»blueBox»>div>

    <div id=»fixedBox»>div>

body>

html>

Свойство Z-INDEX

Свойство задаёт размещение позиционированного элемента относительно оси Z. Что означает: элементы накладываются друг на друга в порядке возрастания — чем больше значение свойства z-index, тем выше расположен элемент. Действует только для элементов, у которых задано значение свойства Position и отлично от static.

• auto — элементы размещаются в порядке их расположения в коде страницы.
• inherit — наследование от родителя.

— в качестве второго элемента у нас изображение. Поменялся порядок размещения у первого и третьего элементов. Нижний элемент-1 разместился сверху, а 3-ий оказался нижним «слоем»:

• background
  border
  bottom
  color
  float
  font
  height
  left
  letter-spacing

  list-style
  margin

  outline
  overflow

  position
  right
  text-align

  top

  width

• Справочник HTML
  Уроки HTML
  Видеокурсы по созданию сайта

Поделиться с друзьями:

position: relative

Относительное позиционирование сдвигает элемент относительно его обычного положения.

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

Координаты

Для сдвига можно использовать координаты:

• top – сдвиг от «обычной» верхней границы
• bottom – сдвиг от нижней границы
• left – сдвиг слева
• right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

Свойства left/top не будут работать для position:static . Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

Все CSS Свойства Позиционирования

Число в столбце «CSS» указывает, в какой версии CSS
определено свойство (CSS1 или CSS2).

Базовый поток документа

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

Что это значит? Во-первых, вывод элементов на страницу браузер осуществляет в том порядке, в котором они следуют в HTML коде.

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</body>

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

<body>
  Этот элемент находится позади других элементов.
  <div>
    Этот вложенный элемент принадлежит воображаемому слою, который находится поверх слоя родителя.
    <span>Этот элемент ещё ближе к нам, его слой располагается над слоем уже его родителя.</span>
  </div>
</body>

В-третьих, положение элемента в потоке зависит от значения свойства .

<body>
  <div class="block-1"><span class="inline-1">inline 1</span><span class="inline-2">inline 2</span><span class="inline-3">inline 3</span><span class="inline-4">inline 4</span></div>
  <div class="block-2"><span class="inline-1">inline 1</span><span class="inline-2">inline 2</span></div>
  <div class="block-3"><span class="inline-1">inline 1</span><span class="inline-2">inline 2</span><span class="inline-3">inline 3</span></div>    
</body>

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

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

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

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

В CSS есть свойства, с помощью которых элементы можно «вырвать» из основного потока документа и задать им другое положение вне базового потока элементов.

К этим свойствам относятся и .

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

Абсолютное позиционирование — это, вероятно, самая простая позиция CSS для понимания Вы начинаете с этого свойства CSS позиции:

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

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

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

Доступны следующие четыре свойства позиционирования:

• Топ
• верно
• дно
• оставили

Вы можете использовать верх или низ — поскольку элемент не может быть расположен в соответствии с обоими этими значениями — и вправо или влево .

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

Остальные значения CSS position

4.1. Свойство position: static — этот параметр стоит по умолчанию. Параметры left, top, right и bottom не работают при этом значении.

4.2. Свойство position: inherit — наследование значение родителя. Т.е. смотрится ближайший элемент, в который заключен этот html-элемент и наследуется его значение.

Для обращения к position из JavaScript нужно писать следующую конструкцию:

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

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

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

Что такое абсолютное позиционирование CSS?

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

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

CSS

#parent { 
  position: relative; 
  width: 500px; 
  height: 400px; 
  background-color: #fafafa; 
  border: solid 3px #9e70ba; 
  font-size: 24px; 
  text-align: center; 
} 
#child { 
  position: absolute; 
  right: 40px; 
  top: 100px; 
  width: 200px; 
  height: 200px; 
  background-color: #fafafa; 
  border: solid 3px #78e382; 
  font-size: 24px; 
  text-align: center; 
}

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

Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, лайки, подписки, дизлайки!

Пожалуйста, оставьте свои мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, дизлайки, отклики, лайки!

Вадим Дворниковавтор-переводчик статьи «CSS Position Relative vs Position Absolute»

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

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

Чтобы использовать это значение атрибута, вам нужно установить:

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

Здесь мы добавляем новый элемент div и устанавливаем белый цвет (непрозрачность 50%),Исправлено позиционированиеВ позиции 0 пикселей сверху:

CSS

HTML

Эффект:

Как видите, белая полоса сверху не меняется при прокрутке веб-страницы (всегда следует за окном браузера).

CSS position

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

•  — данное значение задает абсолютное позиционирование элемента. Что это значит? Во-первых, абсолютно позиционированный элемент полностью отделяется от общего потока HTML-документа. Другие элементы страницы будут вести себя так, будто абсолютно позиционированного элемента не существует. Во-вторых, абсолютно позиционированный элемент можно перемещать относительно его родителя (по умолчанию это окно браузера) при помощи свойств , , и (о них мы расскажем уже в следующем уроке).

•  — относительное позиционирование элемента. В данном случае элемент, как обычно, размещается относительно своего текущего положения в потоке документа, то есть визуальных изменений не видно. Но затем, пользуясь свойствами , , и , можно двигать относительно позиционированный элемент в нужном направлении (начальной точкой отсчета будет исходное положение элемента). Это чем-то похоже на функцию translate() свойства transform.

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

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

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

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

Далее в учебнике: свойства top, left, bottom и right для перемещения позиционированных элементов.

Совместное использование 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.

Позиционирование блоков

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

Рассмотрим два элемента, служащих для стилизации:

1. Тег — это блочный элемент, который может содержащать другие блоки, такие как, например, изображения и таблицы.

Пример:

<div>блок текста<img src="…"><div>

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

Пример:

Текст <span>продолжение текста<span>

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

position: static

Статическое позиционирование — это позиционирование элемента по умолчанию. Такой элемент занимает на веб-странице место соответственно своему положению в html-коде, т.е. определенное в нормальном потоке.

Нормальный поток элементов — это отображение элементов соответственно их месту в коде

На статически позиционированный элемент не действуют свойства , , и .

Пример:

div{
  position static;
}

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

position: fixed

• Фиксированно позиционированный элемент удаляется из потока HTML и позиционируется относительно окна браузера. Элемент как будто «плавает» над другими тегами страницы.
• Он остается на месте при прокрутке страницы.
• При фиксированном позиционировании необходимо задать координаты расположения элемента.

Установка координат:

• |
• |

Значения:| |

Пример:

...
<style type="text/css">

p{
	position fixed;
	top30px;
	right5px;
}

<style><head> 
<body> 
<p>
Я на уроке в первый раз.<br>
Теперь я ученица.<br>
Вошла учительница в класс,-<br>
Вставать или садиться?<br>
<p>
<div>Блок без стиля<div>

Результат:

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

position: relative

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

Установка координат:

• |
• |

Значения:| |

Пример:

<p>
Я на уроке в первый раз.<br>
Теперь я ученица.<br>
Вошла учительница в класс,-<br>
Вставать или садиться?<br>
<p>
<div style="position:relative; top:-100px; left:150px; color:red">
Относительно позиционированный блок
<div>

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Относительно позиционированный блок

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

position: absolute

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

Установка координат:

• |
• |

Значения:| |

Пример:

h1 {
  positionabsolute;
  top 100px;
  left 200px
}

Результат:

Пример взаимодействия с родительским блоком:

1. 1 2 3 4 5 6

   <div style="position:absolute; top: 50px; background-color:#F00"> блок 1 <div> <div style="position:absolute; top:20px; background-color:#0F0"> блок 2 <div>

   Результат:

   блок 1

   блок 2

2. 1 2 3 4 5 6

   <div style="position:absolute; top: 50px; background-color:#F00"> блок 1 <div style="position:absolute; top:20px; background-color:#0F0"> блок 2 <div> <div>

   Результат:

   блок 1

   блок 2

Заключение

Позиционирование обладает своими плюсами и минусами.

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

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

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