Position relative css: Позиционирование элементов | htmlbook.ru

position — CSS | MDN

Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Типы позиционирования

• Позиционируемый элемент — это элемент, у которого вычисленное значение position является relative, absolute, fixed либо sticky. (Другими словами, это все, кроме static.)
• Относительно позиционируемый элемент является элементом, вычисленное значение position которого является relative. Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left (en-US) и right задают горизонтальное смещение.
• Абсолютно позиционируемый элемент — это элемент, чьё вычисленное значение position является absolute или fixed. top, right, bottom и left (en-US) задают смещения от краёв содержащего блок элемента. (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
• Элемент с липкой позицией — это элемент, у которого значение вычисленного position
  является sticky. Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока.

В большинстве случаев абсолютно позиционированный элементы, которые имеют height и width установленные в auto, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как top, так и bottom, и оставляя height неопределённым (то есть ,

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

• Если указаны top и bottom (технически, не auto) — приоритет будет у top.
• Если указаны left и right: приоритет будет у left, когда direction ltr (английский язык, горизонтальный японский и т. д.), приоритет будет у right, когда direction является rtl (персидский , Арабский, иврит и т. д.).

Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

static

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

relative

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

Это значение создаёт новый контекст наложения, когда значение z-index не auto . Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.

absolute

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

Это значение создаёт новый контекст наложения, когда значение z-index не auto. Поля абсолютно позиционированных коробок не сворачиваются с другими полями.

fixed

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

Он позиционируется относительно исходного содержащего блока, установленного viewport, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.

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

sticky

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

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

Это значение всегда создаёт новый контекст наложения. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

Формальный синтаксис

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

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

HTML

<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>

CSS

. box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

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

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

Простой пример:

<h2>Абсолютное позиционирование</h2>
<p>Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.</p>
<p>По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент.  Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы.</p>
<p>Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих.</p>
<p>встроенные элементы <span>как этот</span> и <span>вот этот</span> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов <span>перейдёт на новую строку, если это возможно, - как содержимое этого текста</span>, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:<img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
 

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

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

Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform, perspective, или свойства filter, отличное от

HTML

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. 
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. 
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim.
    Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet.
    Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.
    Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p>
  <div>One</div>
</div>

CSS

.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
. outer {
  width: 500px;
  height: 500px;
  overflow: scroll;
  padding-left: 150px;
}

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

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

#one { position: sticky; top: 10px; }

… позиционирует элемент с id «one» относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

Общее использование для липкого позиционирования — для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.

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

HTML

<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>

CSS

* {
  box-sizing: border-box;
}

dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}

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

Производительность и доступность

Элементы прокрутки, содержащие fixed или sticky контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать sticky или fixed контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление will-change: transform к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.

BCD tables only load in the browser

Контекст наложения (stacking context) — CSS

Контекст наложения (stacking context) это концепция трёхмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном.   HTML элементы занимают это место по порядку, основанному на атрибутах элемента.

« CSS « Understanding CSS z-index

В предыдущем примере  Добавляем z-index, порядок отображения определённых DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( stacking context ).

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

• является корневым элементом (HTML),
• позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от «auto»,
• flex элемент с z-index отличным от  «auto», чей родительский элемент имеет свойство display: flex|inline-flex,
• элементы с  opacity меньше чем 1. (См. the specification for opacity),
• элементы с  transform отличным от «none»,
• элементы с mix-blend-mode значением отличным от «normal»,
• элементы с filter значением отличным от «none»,
• элементы с isolation установленным в  «isolate»,
• position: fixed
• если мы указываем элементу атрибут  will-change при этом не обязательно присваивать ему значения (См.  this post)
• элементы с -webkit-overflow-scrolling (en-US) установленным в «touch»

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

Суммируем:

• Позиционирование и присваивание HTML элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).
• Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения. 
• Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.

Note: Иерархия контекстов наложения является подмножеством иерархии HTML элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.

В примере каждый позиционированный элемент создаёт свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:

Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling’s DIV.

Notes:

• DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контакта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому,  DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .DIV #1).
• По этим же причинам DIV #2 (z-index 2) отрисовывается под DIV#5 (z-index 1), так как DIV #5 принадлежит DIV #3, чей z-index больше( чем z-index DIV #2).
• У DIV #3 есть свойство z-index 4, но это значение независимо от z-index’ов DIV #4, DIV #5 и DIV #6, потому что принадлежат они разным контекстам наложения.
• An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a «version number» of sorts, where child elements are minor version numbers underneath their parent’s major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order):
  • Root
    • DIV #2 — z-index is 2
    • DIV #3 — z-index is 4
      • DIV #5 — z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4. 1
      • DIV #6 — z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3
      • DIV #4 — z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6
    • DIV #1 — z-index is 5

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>

    <title>Understanding CSS z-index: The Stacking Context: Example Source</title>

    <style type="text/css">
      * {
        margin: 0;
        }
      html {
        padding: 20px;
        font: 12px/20px Arial, sans-serif;
        }
      div {
        opacity: 0.7;
        position: relative;
        }
      h2 {
        font: inherit;
        font-weight: bold;
        }
      #div1, #div2 {
        border: 1px dashed #696;
        padding: 10px;
        background-color: #cfc;
        }
      #div1 {
        z-index: 5;
        margin-bottom: 190px;
        }
      #div2 {
        z-index: 2;
        }
      #div3 {
        z-index: 4;
        opacity: 1;
        position: absolute;
        top: 40px;
        left: 180px;
        width: 330px;
        border: 1px dashed #900;
        background-color: #fdd;
        padding: 40px 20px 20px;
        }
      #div4, #div5 {
        border: 1px dashed #996;
        background-color: #ffc;
        }
      #div4 {
        z-index: 6;
        margin-bottom: 15px;
        padding: 25px 10px 5px;
        }
      #div5 {
        z-index: 1;
        margin-top: 15px;
        padding: 5px 10px;
        }
      #div6 {
        z-index: 3;
        position: absolute;
        top: 20px;
        left: 180px;
        width: 150px;
        height: 125px;
        border: 1px dashed #009;
        padding-top: 125px;
        background-color: #ddf;
        text-align: center;
        }
    </style>

  </head>
  <body>

    <div>
      <h2>Division Element #1</h2>
      <code>position: relative;<br/>
      z-index: 5;</code>
    </div>

    <div>
      <h2>Division Element #2</h2>
      <code>position: relative;<br/>
      z-index: 2;</code>
    </div>

    <div>

      <div>
        <h2>Division Element #4</h2>
        <code>position: relative;<br/>
        z-index: 6;</code>
      </div>

      <h2>Division Element #3</h2>
      <code>position: absolute;<br/>
      z-index: 4;</code>

      <div>
        <h2>Division Element #5</h2>
        <code>position: relative;<br/>
        z-index: 1;</code>
      </div>

      <div>
        <h2>Division Element #6</h2>
        <code>position: absolute;<br/>
        z-index: 3;</code>
      </div>

    </div>

  </body>
</html>

Division Element #1

position: relative;
z-index: 5;

232″>Division Element #2

position: relative;
z-index: 2;

Division Element #3

position: absolute;
z-index: 4;

Division Element #4

position: relative;
z-index: 6;

Division Element #5

position: relative;
z-index: 1;

Division Element #6

position: absolute;
z-index: 3;

Original Document Information

Как на самом деле работает position: sticky в CSS | by Workafrolic (±∞) | Web Standards

Перевод «CSS Position Sticky — How It Really Works!» Элада Шехтера.

У position: sticky уже очень неплохая браузерная поддержка, но большинство разработчиков так и не используют это свойство.

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

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

Я полагаю, что вы хорошо знакомы с позиционированием в CSS, но давайте кратко повторим основные моменты:

Ещё три года назад существовало четыре типа позиционирования: static, relative, absolute и fixed.

Основное различие между static и relative, absolute и fixed в том, какое место они занимают в потоке документа (DOM). Элементы с позицией static и relative сохраняют своё естественное положение в потоке документа, в то время как absolute и fixed «вырываются» из потока документа и становятся плавающими.

Новое значение sticky похоже на все предыдущие значения сразу. Я проиллюстрирую это чуть позже.

Моё первое знакомство с «липким» позиционированием

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

При первом знакомстве с position: sticky все быстро понимают, что элемент залипает, когда область просмотра достигает определённой позиции.

Пример:

.some-component {
position: sticky;
top: 0;
} 

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

«Липкая» разведка

Во время своих экспериментов я заметил, что если элемент с position: sticky является единственным ребёнком своего родителя-обёртки, то этот «липкий» элемент не залипает.

<!-- НЕ РАБОТАЕТ!!! -->
<style>
.sticky {
position: sticky;
top: 0;
}
</style><div>
<div>
Некий контент
</div>
</div>

Когда я добавлял больше элементов внутрь родителя-обёртки всё начинало работать как ожидалось.

Почему так происходит?
Причина кроется в том, что элемент с position: sticky может перемещаться только в пределах контейнера, в котором находится. А поскольку в моём случае он был единственным ребёнком, у него не было элементов-братьев, поверх которых он мог перемещаться.

Как на самом деле работает position: sticky в CSS

«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.

«Липкий» элемент — это элемент, которому мы задали position: sticky. Элемент будет становиться плавающим, как только область видимости достигнет определённой позиции, например top: 0px.

Пример:

.some-component {
position: sticky;
top: 0px;
}

«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.

Когда вы задаёте элементу position: sticky, его родитель автоматически становится «липким» контейнером!
Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера.

В этом причина, почему в предыдущем примере «липкий» элемент не залипал: он был единственным дочерним элементом контейнера.

Наглядный пример:

Пример на CodePen:

Понимание «липкого» поведения

Как я и говорил, position: sticky ведёт себя не так, как другие типы позиционирования. Но, с другой стороны, у них есть определённые сходства. Позвольте мне пояснить:

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

В большинстве случаев вы будете использовать position: sticky чтобы прикрепить элемент к верхнему краю страницы. Что-то вроде этого:

.component {
position: sticky;
top: 0;
}

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

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

Полный пример:

HTML

<main>
<header>HEADER</header>
<div>MAIN CONTENT</div>
<footerhs jz">main-footer">FOOTER</footer>
</main>

CSS

. main-footer {     
position: sticky; 
bottom: 0;
}

Живой пример на CodePen:

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

• «Липкое» позиционирование поддерживается всеми основными современными браузерами. Исключение: старый-добрый IE.
• Для Safari потребуется префикс -webkit

position: -webkit-sticky; /* Safari */  
position: sticky;

Вот и всё. Я надеюсь, что вам понравилась эта статья и мне удалось поделиться своим опытом. Я буду признателен, если вы поделитесь этим постом и поаплодируйте.

Меня зовут Элад Шехтер, я веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.

Читать меня можно тут: мой Твиттер, Facebook, LinkedIn.

Вы можете найти меня в группах на Facebook:

Как отменить position relative absolute? — Хабр Q&A

<section><img src="/assets/img/first-bg.jpg" alt="background">
    <div>
      <h2>Taste your fav dish</h2>
      <p>from <span>luxury restaurant!</span></p>
    </div>
  </section>
  <section>
    <div>
      <div>
        <div>call us now for<span>home delivery</span></div>
      </div>
      <div>1-008-005-007</div>
    </div>
  </section>

section.offer{
  padding: 0 0;
  height: 100%;
}
.offer{
  position: relative;
  width: 100%;
  margin-top: 17px;
  @media screen and (max-width: $desktopWidth){
    margin-top: 0px;
  }
}
.offer::after{
  position: static;
}
. offer__img{
  position: absolute;
  display: inline-block;
  width: 100%;
  background: no-repeat center top;
  background-size: cover;
}
.offer__title{
  position: absolute;
  padding: 216px 0 0px 73px;
  text-shadow: 5px 5px 4px black, 0 0 1em black;
  @media screen and (max-width: $tableWidth){
    padding-top: 130px;
    padding-left: 45px;
  }
  @media screen and (max-width: $phoneWidth){
    padding-top: 80px;
    padding-left: 30px;
  }
  @media screen and (max-width: $smPhoneWidth){
    padding-top: 50px;
    padding-left: 20px;
  }
}
.offer__title-heading{
  font-size: 56px;
	letter-spacing: -0.3px;
  color: $mainFontColor;
  @media screen and (max-width: $tableWidth){
    font-size: 40px;
  }
  @media screen and (max-width: $phoneWidth){
    font-size: 30px;
  }
  @media screen and (max-width: $smPhoneWidth){
    font-size: 25px;
  }
}
.offer__title-desc{
	font-size: 40px;
	color: $mainFontColor;
	font-family: 'Playfair Display', serif;
	line-height: 1em;
	margin-left: 3px;
  letter-spacing: -0. 2px;
  @media screen and (max-width: $tableWidth){
    font-size: 30px;
  }
  @media screen and (max-width: $phoneWidth){
    font-size: 20px;
  }
}
.offer__title-desc span{
	color: $primary-color;
}

.call{
	background: #edf1f3;
  border-bottom: 1px solid #dde3e7;
  width: 100%;
  padding: 0 0;
}
.phone{
	text-transform: uppercase;
	font-weight: 700;
	width: 470px;
}
.phone__text{
	background: url('/assets/img/phone.png') no-repeat left center;
	padding: 12px 0 12px 56px;
	color: #14141d;
	font-size: 14px;
	font-family: 'Sintony', sans-serif;
	width: 180px;
	margin: 29px 25px 26px 0;
}
.phone__text__call{
	display: block;
	line-height: 10px;
	font-size: 14px;
	padding: 0 0 15 0px;
}
.phone__text span{
	font-size: 16px;
	display: block;
	margin: 5px 0 0 -1px;
}
.phone__digits{
	font-size: 32px;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	margin: 23px 0 0 0px;
	color: #000;
}

CSS переполнение

Свойство CSS overflow управляет тем, что происходит с контентом, который слишком велик для размещения в определенной области.

Этот текст действительно длинный, а высота его контейнера составляет всего 100 пикселей. Поэтому добавляется полоса прокрутки, чтобы помочь читателю прокручивать содержимое. Lorem ipsum dolor sit amet, Conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Conquat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Possim Assum. Typi non habent clearitatem insitam; est usus legentis in iis qui facit eorum clearitatem.

Переполнение CSS

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

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

• видим - По умолчанию. Перелив не обрезается. Контент отображается вне поля элемента
• скрыто - переполнение обрезается, остальное содержимое будет невидимым
• scroll - Переполнение обрезается, и добавляется полоса прокрутки для просмотра остального содержимого
• auto - аналогично scroll , но полосы прокрутки добавляет только при необходимости

Примечание: Свойство overflow работает только для блочных элементов с указанной высотой.

Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если задано «overflow: scroll»).

перелив: видимый

По умолчанию переполнение - видимых , что означает, что оно не отсекается и рендеринг вне рамки элемента:

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

Пример

div {
width: 200px;
высота: 50 пикселей;
цвет фона: #eee;
перелив: видимый;
}

Попробуй сам "

---

---

переполнение: скрыто

При скрытом значении переполнение обрезается, а остальное содержимое скрывается:

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

---

переполнение: прокрутка

Установка значения прокрутка , переполнение обрезается и добавляется полоса прокрутки для прокрутки внутри поля. Обратите внимание, что это добавит полосу прокрутки как по горизонтали, так и по вертикали (даже если она вам не нужна):

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

---

переполнение: авто

Значение auto аналогично scroll , но полосы прокрутки добавляются только при необходимости:

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

---

переполнение-x и переполнение-y

Свойства overflow-x и overflow-y определяют следует ли изменять переполнение содержимого только по горизонтали или вертикали (или оба):

overflow-x указывает, что делать с левым / правым краями содержание.
overflow-y указывает, что делать с верхними / нижними краями содержание.

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

Пример

div {
overflow-x: скрыто; / * Скрыть горизонтальную полосу прокрутки * /
overflow-y: scroll; / * Добавляем вертикальную полосу прокрутки * /
}

Попробуй сам "

---

Проверьте себя упражнениями!

---

Все свойства переполнения CSS

Недвижимость	Описание
перелив	Указывает, что происходит, если содержимое выходит за пределы поля элемента
переполнение-x	Указывает, что делать с левым / правым краем содержимого, если оно выходит за пределы области содержимого элемента
переполнение	Указывает, что делать с верхними / нижними краями содержимого, если они выходят за пределы области содержимого элемента.

позиция | CSS-уловки

Свойство position может помочь вам управлять расположением элемента, например:

 .element {
  положение: относительное;
  верх: 20 пикселей;
}  

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

relative - только одно из шести значений для свойства position . Вот остальные:

Значения

• static : каждый элемент по умолчанию имеет статическое положение, поэтому элемент будет придерживаться обычного потока страниц.Таким образом, если установлен левый / правый / верхний / нижний / z-индекс, это не повлияет на этот элемент.
• относительный : исходное положение элемента остается в потоке документа, как и статическое значение . Но теперь left / right / top / bottom / z-index будут работать. Позиционные свойства «подталкивают» элемент из исходного положения в этом направлении.
• absolute : элемент удаляется из потока документа, а другие элементы будут вести себя так, как будто его даже нет, в то время как все остальные позиционные свойства будут работать с ним.
• фиксировано : элемент удаляется из потока документа, как абсолютно позиционированные элементы. Фактически, они ведут себя почти одинаково, только элементы с фиксированным позиционированием всегда относятся к документу, а не к конкретному родительскому элементу, и на них не влияет прокрутка.
• липкий (экспериментальный): элемент обрабатывается как относительное значение до тех пор, пока положение прокрутки области просмотра не достигнет заданного порогового значения, после чего элемент займет фиксированную позицию , в которой ему будет приказано закрепиться.
,
• , наследует : позиция . Значение не каскадно, поэтому его можно использовать специально для принудительного выполнения, а наследует значение позиционирования от своего родителя.

Абсолютный

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

  .element {
  позиция: абсолютная;
}  

И когда мы попытаемся установить другие значения, такие как слева , снизу и справа , мы обнаружим, что дочерний элемент реагирует не на размеры своего родителя, а на размер документа:

 .element {
  позиция: абсолютная;
  слева: 0;
  справа: 0;
  внизу: 0;
}  

Чтобы дочерний элемент располагался абсолютно относительно своего родительского элемента, нам нужно установить это на самом родительском элементе:

  . parent {
  положение: относительное;
}  

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

Фиксированный

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

Настольный компьютер

липкий

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

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

Возьмем следующий пример:

  .element {
  положение: липкое; верх: 50 пикселей;
}  

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

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

Настольный компьютер

Дополнительная информация

видео на 25 февраля 2015 г.

# 110: Краткий обзор значений позиции CSS

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

Абсолютное, относительное, фиксированное позиционирование: чем они отличаются?

Создание скользящих эффектов с помощью липкого позиционирования

Работа с переполнением и положением: липкое;

Представляемся с позицией: липкая;

Как использовать CSS-сетку для закрепления верхних и нижних колонтитулов

Липкий нижний колонтитул, пять способов

Размещение прикрепленных заголовков и заголовков таблиц

положение: липкое;

Подробнее Позиция нравится: хитрый;

Что делать, если не было position: static ;?

Абсолютное, относительное, фиксированное позиционирование: чем они отличаются?

Давайте поговорим о свойстве позиции .Я знаю, что новичкам это интересно. Вот вопрос, который я получил недавно:

Я новичок в веб-дизайне и не усвоил различия в расположении элементов. Я знаю, что есть абсолютных , фиксированных и относительных . Есть ли другие? Кроме того, сильно ли они различаются? И когда вы должны использовать что?

Есть еще два: статический , который используется по умолчанию, и липкий , что очень наворочено. Да , все они очень сильно различаются! Каждый из них невероятно полезен, и то, что вы должны использовать, конечно же, зависит от желаемого результата.

Прежде всего важно понять, что каждый отдельный элемент на веб-странице является блоком. Буквально прямоугольник из пикселей. Это легко понять, установив для элемента значение display: block; , или если этот элемент по умолчанию является блочным, например

  .el {
  положение: статическое;
  положение: относительное;
  позиция: абсолютная;
  положение: фиксированное;
  положение: липкое;
  положение: наследовать;
}  

  
 Первый элемент 
 Второй элемент 
  

  #first_element {
  положение: относительное;
  слева: 30 пикселей;
  верх: 70 пикселей;
  ширина: 500 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px # ff7347;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}

#second_element {
  положение: относительное;
  ширина: 500 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px # ff7347;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}  

  #parent {
  положение: относительное;
  ширина: 500 пикселей;
  высота: 400 пикселей;
  цвет фона: #fafafa;
  граница: solid 3px # 9e70ba;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}

#ребенок {
  позиция: абсолютная;
  вправо: 40 пикселей;
  верх: 100 пикселей;
  ширина: 200 пикселей;
  высота: 200 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px # 78e382;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}  

  .box-orange {// без объявления позиции
  фон: оранжевый;
  высота: 100 пикселей;
  ширина: 100 пикселей;
}

.box-blue {
  фон: светло-голубой;
  высота: 100 пикселей;
  ширина: 100 пикселей;
  положение: статическое; // Объявлен как статический
}  

  .box-orange {
  положение: относительное; // Теперь мы готовы переместить элемент
  фон: оранжевый;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  верх: 100 пикселей; // 100 пикселей сверху относительно его старой позиции
  слева: 100 пикселей; // 100 пикселей слева
}  

 .box-orange {
  позиция: абсолютная;
  фон: оранжевый;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}  

  .box-orange {
  позиция: абсолютная;
  фон: оранжевый;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  слева: 5 пикселей;
  верх: 5 пикселей;
}  

  .container {
  положение: относительное;
  фон: светло-серый;
}

.box-orange {
  позиция: абсолютная;
  фон: оранжевый;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  справа: 5 пикселей; // 5 пикселей относительно самого правого родительского элемента
}  

  .container {
  положение: относительное;
  фон: светло-серый;
}

.box-orange {
  положение: фиксированное;
  фон: оранжевый;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  справа: 5 пикселей; // 5 пикселей относительно самого правого родительского элемента
}  

  
 Первый элемент 
 Второй элемент 
  

  #first_element {
  положение: относительное;
  слева: 30 пикселей;
  верх: 70 пикселей;

  ширина: 500 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px # ff7347;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}

#second_element {
   положение: относительное;

   ширина: 500 пикселей;
   цвет фона: #fafafa;
   граница: сплошная 3px # ff7347;
   размер шрифта: 24 пикселя;
   выравнивание текста: центр;
}
  

  #parent {
  положение: относительное;

  ширина: 500 пикселей;
  высота: 400 пикселей;
  цвет фона: #fafafa;
  граница: solid 3px # 9e70ba;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}

#ребенок {
  позиция: абсолютная;
  вправо: 40 пикселей;
  верх: 100 пикселей;

  ширина: 200 пикселей;
  высота: 200 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px # 78e382;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}
  

  
 Первый элемент 
 Второй элемент 
  

  #first_element {
  положение: относительное;
  слева: 30 пикселей;
  верх: 70 пикселей;

  ширина: 500 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px # ff7347;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}

#second_element {
   положение: относительное;

   ширина: 500 пикселей;
   цвет фона: #fafafa;
   граница: сплошная 3px # ff7347;
   размер шрифта: 24 пикселя;
   выравнивание текста: центр;
}
  

  #parent {
  положение: относительное;
  
  ширина: 500 пикселей;
  высота: 400 пикселей;
  цвет фона: #fafafa;
  граница: solid 3px # 9e70ba;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}

#ребенок {
  позиция: абсолютная;
  вправо: 40 пикселей;
  верх: 100 пикселей;

  ширина: 200 пикселей;
  высота: 200 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px # 78e382;
  размер шрифта: 24 пикселя;
  выравнивание текста: центр;
}