0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Тема позиционирования не заканчивается только на относительном и абсолютном. Их вполне достаточно для большинства возникающих ситуаций - это очень мощные и гибкие инструменты.</p>
1
<p>Тема позиционирования не заканчивается только на относительном и абсолютном. Их вполне достаточно для большинства возникающих ситуаций - это очень мощные и гибкие инструменты.</p>
2
<p>Но бывают ситуации, где нелегко обойтись каким-то одним из этих двух видов позиционирования. Представьте, что нам необходимо сделать шапку сайта, которая будет перемещаться вместе с тем, как пользователь скролит страницу. Ни относительное, ни абсолютное позиционирование здесь не подойдет по одной простой причине: блок не будет перемещаться при прокрутке. Он застынет на том месте в документе, где было указано.</p>
2
<p>Но бывают ситуации, где нелегко обойтись каким-то одним из этих двух видов позиционирования. Представьте, что нам необходимо сделать шапку сайта, которая будет перемещаться вместе с тем, как пользователь скролит страницу. Ни относительное, ни абсолютное позиционирование здесь не подойдет по одной простой причине: блок не будет перемещаться при прокрутке. Он застынет на том месте в документе, где было указано.</p>
3
<p>Для решения такой проблемы существует<em>фиксированное позиционирование</em>. Оно очень похоже на абсолютное:</p>
3
<p>Для решения такой проблемы существует<em>фиксированное позиционирование</em>. Оно очень похоже на абсолютное:</p>
4
<ul><li>элемент также выдергивается из нормального потока документа, а его место занимают другие элементы;</li>
4
<ul><li>элемент также выдергивается из нормального потока документа, а его место занимают другие элементы;</li>
5
<li>мы можем управлять расположением с помощью правил top, right, bottom, left.</li>
5
<li>мы можем управлять расположением с помощью правил top, right, bottom, left.</li>
6
</ul><p>Отличительной чертой фиксированного позиционирования является то, что<strong>элемент позиционируется относительно видимой области браузера</strong>. То есть, если установить координаты<em>0</em>по верхней границе и<em>0</em>по левой границе, то элемент всегда будет в этой позиции, вне зависимости от того, прокручивает пользователь сейчас страницу или нет.</p>
6
</ul><p>Отличительной чертой фиксированного позиционирования является то, что<strong>элемент позиционируется относительно видимой области браузера</strong>. То есть, если установить координаты<em>0</em>по верхней границе и<em>0</em>по левой границе, то элемент всегда будет в этой позиции, вне зависимости от того, прокручивает пользователь сейчас страницу или нет.</p>
7
<p><a>https://codepen.io/hexlet/pen/OJLOEJJ</a></p>
7
<p><a>https://codepen.io/hexlet/pen/OJLOEJJ</a></p>
8
<p>Попробуйте пролистать текст, и вы увидите, что левая область остается на месте. Таким образом зачастую создают меню, которое пользователь может всегда видеть.</p>
8
<p>Попробуйте пролистать текст, и вы увидите, что левая область остается на месте. Таким образом зачастую создают меню, которое пользователь может всегда видеть.</p>