path: root/files/ru/learn/css/css_layout/positioning/index.html

---
title: Позиционирование
slug: Learn/CSS/CSS_layout/Positioning
translation_of: Learn/CSS/CSS_layout/Positioning
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div>

<p class="summary">Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения {{cssxref("position")}} и как их использовать.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые знания:</th>
   <td>
    <p>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), идея о том как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Задача:</th>
   <td>Изучить как работает CSS позиционирование.</td>
  </tr>
 </tbody>
</table>

<p>Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> из нашего GitHub репозитория (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">исходный код здесь</a>) и используйте его как отправную точку.</p>

<h2 id="Введение_в_позиционирование">Введение в позиционирование</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент - позиционирование. Или </span></span><span class="tlid-translation translation" lang="ru"><span title="">если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.</span></span></p>

<p>Существует несколько разных типов позиционирования<span class="tlid-translation translation" lang="ru"><span title="">, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство </span></span>{{cssxref("position")}}.</p>

<h3 id="Статическое_позиционирование">Статическое позиционирование</h3>

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

<p>Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте <code>class</code> <code>positioned</code> ко второму {{htmlelement("p")}} в HTML:</p>

<pre class="brush: html   notranslate">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>

<p>А теперь добавьте следующее правило в конец вашего CSS:</p>

<pre class="brush: css   notranslate">.positioned {
  position: static;
  background: yellow;
}</pre>

<p>И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!</p>

<div class="note">
<p><strong>Примечание</strong>: вы можете посмотреть живой пример на данном этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">см. исходный код</a>).</p>
</div>

<h3 id="Относительное_позиционирование">Относительное позиционирование</h3>

<p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p>

<pre class="brush: css   notranslate">position: relative;</pre>

<p>Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} которые мы объясним в следующем разделе.</p>

<h3 id="Введение_в_top_bottom_left_и_right">Введение в top, bottom, left, и right</h3>

<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} используются вместе с {{cssxref("position")}} чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу <code>.positioned</code> в вашем CSS:</p>

<pre class="brush: css   notranslate">top: 30px;
left: 30px;</pre>

<div class="note">
<p><strong>Примечание</strong>: значения этих свойств могут принимать любые <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">единицы</a> которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.</p>
</div>

<p>Если вы сейчас сохраните и обновите, вы получите примерно такой результат:</p>

<div class="hidden">
<pre class="brush: html   notranslate">&lt;h1&gt;Relative positioning&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css   notranslate">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: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Введение_в_top_bottom_left_и_right', '100%', 500) }}</p>

<p>Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? <span class="tlid-translation translation" lang="ru"><span title="">Как бы нелогично это ни звучало</span></span> это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали <code>top: 30px;</code>, сила толкает блок, заставляя его перемещаться вниз на 30px.</p>

<div class="note">
<p><strong>Примечание</strong>: вы можете посмотреть пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">см. исходный код</a>).</p>
</div>

<h3 id="Абсолютное_позиционирование">Абсолютное позиционирование</h3>

<p>Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p>

<pre class="brush: css   notranslate">position: absolute;</pre>

<p>Если вы сохраните и обновите, то вы должны увидеть нечто подобное:</p>

<div class="hidden">
<pre class="brush: html   notranslate">&lt;h1&gt;Absolute positioning&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css   notranslate">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;
}</pre>
</div>

<p>{{ EmbedLiveSample('Абсолютное_позиционирование', '100%', 420) }}</p>

<p>В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; <span class="tlid-translation translation" lang="ru"><span title="">опрокидывающиеся панели; ф</span></span><span class="tlid-translation translation" lang="ru"><span title="">ункции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы;</span> <span title="">и так далее...</span></span></p>

<p>Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. <span class="tlid-translation translation" lang="ru"><span title="">Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является </span></span><strong><span class="tlid-translation translation" lang="ru"><span title="">исходным содержащим блоком</span></span></strong>. См. раздел ниже для дополнительной информации<span class="tlid-translation translation" lang="ru"><span title="">).</span></span></p>

<div class="note">
<p><strong>Примечание</strong>: вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить <code>top: 0; bottom: 0; left: 0; right: 0;</code> и <code>margin: 0;</code> для вашего позиционируемого элемента и посмотрите, что произойдёт! <span class="tlid-translation translation" lang="ru"><span title="">Потом снова все верните...</span></span></p>
</div>

<div class="note">
<p><strong>Примечание</strong>: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.</p>
</div>

<div class="note">
<p><strong>Примечание</strong>: вы можете посмотреть пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">см. исходный код</a>).</p>
</div>

<h3 id="Контекст_позиционирования">Контекст позиционирования</h3>

<p>Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">Определение содержащего блока</a>).</p>

<p>Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в <strong><span class="tlid-translation translation" lang="ru"><span title="">исходным </span></span>содержащем блоке</strong>. <span class="tlid-translation translation" lang="ru"><span title="">Исходный </span></span>содержащий блок <span class="tlid-translation translation" lang="ru"><span title="">имеет размеры области просмотра</span></span>, а также является блоком, содержащим элемент {{htmlelement("html")}}. <span class="tlid-translation translation" lang="ru"><span title="">Проще говоря</span></span>, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра.</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на </span></span>30px от верхнего и левого края страницы. Мы можем изменить <strong>контекст </strong> <strong>позиционирования </strong>— относительно какого элемента позиционируется позиционируемый элемент. <span class="tlid-translation translation" lang="ru"><span title="">Это делается путём установки позиционирования на одном из предков элемента </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен).</span> <span title="">Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего </span></span><code>body</code><span class="tlid-translation translation" lang="ru"><span title="">:</span></span></p>

<pre class="brush: css   notranslate">position: relative;</pre>

<p>Это должно дать следующий результат:</p>

<div class="hidden">
<pre class="brush: html   notranslate">&lt;h1&gt;Positioning context&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css   notranslate">body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

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;
}</pre>
</div>

<p>{{ EmbedLiveSample('Контекст_позиционирования', '100%', 420) }}</p>

<p>Позиционируемый элемент теперь располагается относительно элемента {{htmlelement("body")}}.</p>

<div class="note">
<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">см. исходный код</a>).</p>
</div>

<h3 id="Введение_в_z-index">Введение в z-index</h3>

<p><span class="tlid-translation translation" lang="ru"><span title="">Все это абсолютное позиционирование </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">хорошее развлечение</span></span>, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?</p>

<p>Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:</p>

<pre class="brush: css   notranslate">p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}</pre>

<p>На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А <span class="tlid-translation translation" lang="ru"><span title="">также он расположен под оригинальным параграфом </span></span><code>.positioned</code>, где они оба перекрываются. Это потому что параграф <code>.positioned</code> является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Можете ли вы изменить порядок наложения?</span></span> Да, можете, используя свойство {{cssxref("z-index")}}. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для <span class="tlid-translation translation" lang="ru"><span title="">определения позиции для таких вещей, как фоновые изображения</span></span> и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (<span class="tlid-translation translation" lang="ru"><span title="">во всяком случае,</span></span> для языков, направленных слева на право).</p>

<p>У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (<span class="tlid-translation translation" lang="ru"><span title="">или что ещё вам нравится иметь перед экраном). </span></span>Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют <code>z-index</code> <code>auto</code>, что фактически равно 0.</p>

<p>Для того чтобы изменить порядок наложения, попробуйте объявить для вашего <code>p:nth-of-type(1)</code> правила:</p>

<pre class="brush: css   notranslate">z-index: 1;</pre>

<p>Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:</p>

<div class="hidden">
<pre class="brush: html   notranslate">&lt;h1&gt;z-index&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css   notranslate">body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

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;
}

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
  z-index: 1;
}
</pre>
</div>

<p>{{ EmbedLiveSample('Введение_в_z-index', '100%', 400) }}</p>

<p>Обратите внимание что <code>z-index</code> принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.</p>

<div class="note">
<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">см. исходный код</a>).</p>
</div>

<h3 id="Фиксированное_позиционированиее">Фиксированное позиционированиее</h3>

<p>А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), <strong>фиксированное позиционирование </strong><em>обычно </em>фиксирует элемент в месте относительно <span class="tlid-translation translation" lang="ru"><span title="">видимой части области просмотра</span></span>, <span class="tlid-translation translation" lang="ru"><span title="">кроме случаев, когда один из его потомков</span></span> является фиксированным блоком <span class="tlid-translation translation" lang="ru"><span title="">из-за того, что его</span></span> <a href="/en-US/docs/Web/CSS/transform">свойству transform </a><span class="tlid-translation translation" lang="ru"><span title="">отличается от none. </span></span>Это значит, что вы можете создать <span class="tlid-translation translation" lang="ru"><span title="">элементы пользовательского интерфейса, которые зафиксированы на месте, </span></span> <span class="tlid-translation translation" lang="ru"><span title="">как постоянные меню навигации,</span></span> которые всегда видимы вне зависимости от того сколько прокручивается страница.</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила </span></span><code>p:nth-of-type(1)</code> и <code>.positioned</code> из вашего CSS.</p>

<p>А теперь, обновите правило <code>body</code> удалив объявление <code>position: relative;</code> и добавьте фиксированную высоту как тут:</p>

<pre class="brush: css   notranslate">body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}</pre>

<p>Теперь мы собираемся дать элементу {{htmlelement("h1")}} <code>position: fixed;</code>, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:</p>

<pre class="brush: css   notranslate">h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}</pre>

<p><code>top: 0;</code> необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.</p>

<p>Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, <span class="tlid-translation translation" lang="ru"><span title="">при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним.</span></span> Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:</p>

<pre class="brush: css   notranslate">p:nth-of-type(1) {
  margin-top: 60px;
}</pre>

<p>Теперь вы должны видеть законченный пример:</p>

<div class="hidden">
<pre class="brush: html   notranslate">&lt;h1&gt;Fixed positioning&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;I'm not positioned any more...&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css   notranslate">body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

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

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

h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  background: white;
  padding: 10px;
}

p:nth-of-type(1) {
  margin-top: 60px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Фиксированное_позиционированиее', '100%', 400) }}</p>

<div class="note">
<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">см. исходный код</a>).</p>
</div>

<h3 id="position_sticky">position: sticky</h3>

<p>Доступно другое значение позиции называемое <code>position: sticky</code>, которое несколько новее чем другие. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.</span></span></p>

<div id="Sticky_1">
<div class="hidden">
<h6 id="Sticky_positioning_example">Sticky positioning example</h6>

<pre class="brush: html   notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;

&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

&lt;div class="positioned"&gt;Sticky&lt;/div&gt;

&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;

&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>

<pre class="brush: css   notranslate">body {
  width: 500px;
  margin: 0 auto;
}

.positioned {
  background: rgba(255,84,104,.3);
  border: 2px solid rgb(255,84,104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}</pre>
</div>

<pre class="brush: css   notranslate">.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>

<p>Интересное и общее использование <code>position: sticky</code> <span class="tlid-translation translation" lang="ru"><span title="">заключается </span></span>в создании индексных страниц <span class="tlid-translation translation" lang="ru"><span title="">с прокруткой, где разные заголовки липнут к верху страницы</span></span>, когда они достигают его. Разметка такого примера может выглядеть так:</p>

<pre class="brush: html   notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;

&lt;dl&gt;
    &lt;dt&gt;A&lt;/dt&gt;
    &lt;dd&gt;Apple&lt;/dd&gt;
    &lt;dd&gt;Ant&lt;/dd&gt;
    &lt;dd&gt;Altimeter&lt;/dd&gt;
    &lt;dd&gt;Airplane&lt;/dd&gt;
    &lt;dt&gt;B&lt;/dt&gt;
    &lt;dd&gt;Bird&lt;/dd&gt;
    &lt;dd&gt;Buzzard&lt;/dd&gt;
    &lt;dd&gt;Bee&lt;/dd&gt;
    &lt;dd&gt;Banana&lt;/dd&gt;
    &lt;dd&gt;Beanstalk&lt;/dd&gt;
    &lt;dt&gt;C&lt;/dt&gt;
    &lt;dd&gt;Calculator&lt;/dd&gt;
    &lt;dd&gt;Cane&lt;/dd&gt;
    &lt;dd&gt;Camera&lt;/dd&gt;
    &lt;dd&gt;Camel&lt;/dd&gt;
    &lt;dt&gt;D&lt;/dt&gt;
    &lt;dd&gt;Duck&lt;/dd&gt;
    &lt;dd&gt;Dime&lt;/dd&gt;
    &lt;dd&gt;Dipstick&lt;/dd&gt;
    &lt;dd&gt;Drone&lt;/dd&gt;
    &lt;dt&gt;E&lt;/dt&gt;
    &lt;dd&gt;Egg&lt;/dd&gt;
    &lt;dd&gt;Elephant&lt;/dd&gt;
    &lt;dd&gt;Egret&lt;/dd&gt;
&lt;/dl&gt;
</pre>

<p>CSS может выглядеть как показано ниже. В нормальном потоке элементы {{htmlelement("dt")}} будут прокручиваться вместе с контентом. Когда мы добавляем <code>position: sticky</code> к элементу {{htmlelement("dt")}}, вместе со значением {{cssxref("top")}} 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.</p>

<pre class="brush: css   notranslate">dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}
</pre>

<div id="Sticky_2">
<div class="hidden">
<pre class="brush: css   notranslate">body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}
</pre>

<pre class="brush: html   notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;

&lt;dl&gt;
    &lt;dt&gt;A&lt;/dt&gt;
    &lt;dd&gt;Apple&lt;/dd&gt;
    &lt;dd&gt;Ant&lt;/dd&gt;
    &lt;dd&gt;Altimeter&lt;/dd&gt;
    &lt;dd&gt;Airplane&lt;/dd&gt;
    &lt;dt&gt;B&lt;/dt&gt;
    &lt;dd&gt;Bird&lt;/dd&gt;
    &lt;dd&gt;Buzzard&lt;/dd&gt;
    &lt;dd&gt;Bee&lt;/dd&gt;
    &lt;dd&gt;Banana&lt;/dd&gt;
    &lt;dd&gt;Beanstalk&lt;/dd&gt;
    &lt;dt&gt;C&lt;/dt&gt;
    &lt;dd&gt;Calculator&lt;/dd&gt;
    &lt;dd&gt;Cane&lt;/dd&gt;
    &lt;dd&gt;Camera&lt;/dd&gt;
    &lt;dd&gt;Camel&lt;/dd&gt;
    &lt;dt&gt;D&lt;/dt&gt;
    &lt;dd&gt;Duck&lt;/dd&gt;
    &lt;dd&gt;Dime&lt;/dd&gt;
    &lt;dd&gt;Dipstick&lt;/dd&gt;
    &lt;dd&gt;Drone&lt;/dd&gt;
    &lt;dt&gt;E&lt;/dt&gt;
    &lt;dd&gt;Egg&lt;/dd&gt;
    &lt;dd&gt;Elephant&lt;/dd&gt;
    &lt;dd&gt;Egret&lt;/dd&gt;
&lt;/dl&gt;
</pre>
</div>
</div>

<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p>

<p>Липкие элементы являются "липкими" относительно ближайшего предка с "прокручивающимся механизмом", который определяется свойством <a href="/en-US/docs/Web/CSS/position">позиции</a> его предка.</p>

<div class="note">
<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">см. исходный код</a>).</p>
</div>

<h2 id="Проверь_свои_навыки!">Проверь свои навыки!</h2>

<p>Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. <a href="/en-US/docs/Learn/CSS/CSS_layout/Position_skills">Проверьте свои навыки: Позиционирование</a>.</p>

<h2 id="Заключение">Заключение</h2>

<p>Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, всё же как вы видите, существует много задач, подходящих для него.</p>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Справка свойства {{cssxref("position")}}.</li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Примеры практического позиционирования</a>, для дополнительных полезных идей</li>
</ul>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS макет</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство по медиавыражениям для новичков</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макетов</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
</ul>