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

Содержание

position - CSS | MDN

Свойство css position указывает, как элемент позиционируется в документе. top, right, bottom и left (en-US) определяют конечное местоположение позиционированных элементов.

Исходный код этого интерактивного примера хранится в 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 неопределённым (то есть , auto). Ими также можно заполнить доступное горизонтальное пространство, указав как left (en-US), так и right, и оставляя width как auto.

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

  • Если указаны 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;
}

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

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

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

<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, отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

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;
Более 86% браузеров поддерживает sticky по данным Can I Use

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

Другие мои посты о CSS

Кто я?

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

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

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

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

section call отображается на offer, а нужно чтобы call отображалась после offer, как если бы к offer не применялись position relative и absolute
<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 {
  положение: относительное;
}  

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

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

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

Настольный компьютер
Chrome Firefox IE Edge Safari
4 2 7 12 902 902 902 902 902 902 902 902 902 902 902 902 902 902 902
Android Chrome Android Firefox Android iOS Safari
90 87 3 8

липкий

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

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

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

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

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

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

Настольный компьютер
Chrome Firefox IE Edge Safari
91 59 Нет 90 7,1
Android Chrome Android Firefox Android iOS Safari
90 87 90 8 *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Краткий ответ

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

Более длинный ответ

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

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

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

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

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

родственник

Этот тип позиционирования, вероятно, наиболее сбивает с толку и используется неправильно.На самом деле это означает «относительно себя». Если вы установите position: relative; на элементе, но никакие другие атрибуты позиционирования ( верхний , левый , нижний или правый ), это не повлияет на его позиционирование вообще, оно будет точно таким, как если бы вы его оставили как позиция: статическая; Но если вы сделаете , дайте ему другой атрибут позиционирования, скажем, top: 10px; , он сместит свое положение на 10 пикселей на вниз на от того места, где он был бы на , как обычно, на .Я уверен, вы можете себе представить, возможность перемещать элемент в зависимости от его обычного положения очень полезна. Я часто использую это, чтобы выстраивать элементы формы, которые не хотят выстраиваться так, как я хочу.

Есть еще две вещи, которые происходят при установке position: relative; на элементе, о котором вам следует знать. Во-первых, он вводит возможность использовать z-index для этого элемента, что не работает со статически позиционированными элементами.Даже если вы не установите значение z-index , этот элемент теперь будет отображаться как поверх любого другого статически позиционированного элемента. Вы не можете бороться с этим, установив более высокое значение z-index для статически позиционированного элемента.

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

абсолютное

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

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

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

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

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

липкий

Липкое позиционирование действительно уникально! Прикрепленный элемент будет просто сидеть там как статический элемент, но когда вы прокручиваете мимо , если у его родительского элемента есть место (обычно: дополнительная высота), липкий элемент будет вести себя так, как если бы он фиксировал до этого родительского элемента вне комнаты. Это звучит странно в таких словах, но на демонстрации легко увидеть, что происходит.

Связанные концепции

CSS Position: Relative vs Position Absolute

Свойство CSS position определяет, как следует из названия, как элемент располагается на веб-странице.

Если вам интересно прочитать о свойствах шрифта, могут быть интересны статьи об относительном размере шрифта и столбцах CSS.

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

  • Статический - это значение по умолчанию, все элементы в порядке, как они отображаются в документе.
  • Relative - элемент позиционируется относительно своего нормального положения.
  • Absolute - элемент позиционируется абсолютно относительно своего первого расположенного родителя.
  • Исправлено - элемент позиционируется относительно окна браузера.
  • Sticky - элемент располагается в зависимости от положения прокрутки пользователя.

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

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

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

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

После этого краткого объяснения нам нужно подкрепить его примером.

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

HTML

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

CSS

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

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


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

Этот тип позиционирования позволяет разместить ваш элемент именно там, где вы хотите .

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

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

Следующее, что снова нужно показать, - это показать пример.

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

HTML

  

CSS

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

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

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

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

Ознакомьтесь с другими подробными статьями, связанными со свойствами CSS, такими как эта: CSS Positions, SASS и LESS Nesting.

Как использовать свойство position в CSS для выравнивания элементов

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

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

В этой статье я объясню один из самых запутанных способов выравнивания элементов с помощью чистого CSS: свойство position. У меня также есть еще один учебник по CSS Display Property.

Если хотите, вы можете посмотреть видеоверсию CSS Positioning Tutorial:

Давайте начнем...

CSS Position & Helper Properties

Итак, есть 5 основных значений Position Property :

position: static | родственник | абсолютный | фиксированный | липкий

и дополнительные свойства для установки координат элемента (я называю их «вспомогательные свойства» ):

top | право | внизу | left И z-index

Важное примечание : Вспомогательные свойства не работают без объявленной позиции или с position: static.
Что это за z-index?

У нас есть два измерения высоты и ширины (x, y). Z - это 3-е измерение. Элемент на веб-странице появляется перед другими элементами, поскольку его значение z-index увеличивается.

Z-index не работает с позицией : статической или без заявленной позиции.
Элементы упорядочены сзади наперед, так как их z-index увеличивается

Вы можете посмотреть видео на моем канале, чтобы узнать, как использовать z-index более подробно:

Теперь давайте продолжим с позиция свойство значения ...

1. Статическое положение

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

Сначала мы определяем нашу структуру HTML:

  
  

Затем мы создаем 2 блока и определяем их ширину, высоту и положение:

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

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

Как мы видим на картинке, определение position: static или not не имеет никакого значения. Ящики располагаются в соответствии с нормальным документооборотом .

2. Относительное

положение: относительное : Новое положение элемента относительно его нормального положения.

Начиная с position: relative и для всех нестатических position значений, мы можем изменить положение элемента по умолчанию , используя вспомогательное свойство s, которое I уже упоминалось выше.

Давайте переместим оранжевую рамку рядом с синей.

  .box-orange {
  положение: относительное; // Теперь мы готовы переместить элемент
  фон: оранжевый;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  верх: 100 пикселей; // 100 пикселей сверху относительно его старой позиции
  слева: 100 пикселей; // 100 пикселей слева
}  
Оранжевый прямоугольник перемещается на 100 пикселей вниз и вправо относительно его нормального положения
ПРИМЕЧАНИЕ. Использование position: relative для элемента не влияет на положения других элементов.

3. Абсолютный

В позиции : относительный , элемент позиционируется относительно себя . Однако позиционированный элемент absolute ly расположен на относительно своего родительского .

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

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

Давайте добавим контейнер в качестве родительского элемента:

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

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

Переместим оранжевый прямоугольник на 5 пикселей:

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

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

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

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

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

Как и position: absolute , фиксированные элементы также удаляются из обычного потока документов.Различия заключаются в следующем:

  • Они только относительно документа , не относятся к другим родителям.
  • Это , на которые не влияет прокрутка .
  .container {
  положение: относительное;
  фон: светло-серый;
}

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

Здесь, в примере, я изменяю положение оранжевого прямоугольника на фиксированный , и на этот раз он находится в относительных 5px справа от , а не его родительского элемента (контейнера). :

Как мы видим, прокрутка страницы не влияет на фиксированное положение .Он больше не относится к своему родителю (контейнеру).

5. Прикрепленное положение

: липкое можно объяснить как сочетание положения: относительного и положения: фиксированного .

Он ведет себя до объявленной точки как позиция: относительная , после этого она меняет свое поведение на позиция: фиксированная . Лучше всего объяснить позицию : прилипание на примере:

ВАЖНО: Прикрепленная позиция не поддерживается в Internet Explorer и более ранних версиях других браузеров. Вы можете проверить поддержку браузера на caniuse.com.

Браузер Поддержка позиции: липкая

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

Если вы хотите узнать больше о веб-разработке, не стесняйтесь подписывайтесь на меня на Youtube !

Спасибо за внимание!

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

Свойство CSS position определяет, как следует из названия, расположение элемента на веб-странице.

Если вам интересно прочитать о свойствах шрифта, могут быть интересны статьи об относительном размере шрифта и столбцах CSS.

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

  • Статический - это значение по умолчанию, все элементы в порядке, как они отображаются в документе.
  • Relative - элемент позиционируется относительно своего нормального положения.
  • Абсолютный - элемент позиционируется абсолютно относительно своего первого расположенного родителя.
  • Исправлено - элемент позиционируется относительно окна браузера.
  • Sticky - элемент позиционируется в зависимости от положения прокрутки пользователя.

Теперь, когда мы объяснили основы, мы поговорим подробнее о двух наиболее часто используемых значениях положения - относительном и абсолютном .

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

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

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

После этого краткого объяснения нам нужно подкрепить его примером.

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

HTML

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

CSS

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

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

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

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

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

Абсолютное позиционирование позволяет разместить элемент именно там, где вы хотите. .

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

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

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

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

HTML

  

CSS

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

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

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

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

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

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

Ознакомьтесь с другими подробными статьями, связанными со свойствами CSS, такими как эта: CSS Positions, SASS и LESS Nesting.

Изначально опубликовано в блоге Колосек.

CSS Position Relative vs Position Absolute

Свойство CSS position определяет, как следует из названия, как элемент располагается на веб-странице.

Если вам интересно прочитать о свойствах шрифта, могут быть интересны статьи об относительном размере шрифта и столбцах CSS.

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

  • Статический - это значение по умолчанию, все элементы в порядке, как они отображаются в документе.
  • Relative - элемент позиционируется относительно своего нормального положения.
  • Absolute - элемент позиционируется абсолютно относительно своего первого расположенного родителя.
  • Исправлено - элемент позиционируется относительно окна браузера.
  • Sticky - элемент располагается в зависимости от положения прокрутки пользователя.

Теперь, когда мы объяснили основы, мы поговорим подробнее о двух наиболее часто используемых значениях положения - относительном и абсолютном .

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

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

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

После этого краткого объяснения нам нужно подкрепить его примером.

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

HTML

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

CSS

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

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

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

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

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

Абсолютное позиционирование позволяет разместить элемент именно там, где вы хотите. .

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

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

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

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

HTML

  

CSS

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

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

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

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

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

Ознакомьтесь с другими подробными статьями, связанными со свойствами CSS, такими как эта: CSS Positions, SASS и LESS Nesting.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *