0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Позиционирование является большим модулем в CSS и позволяет описать, как элемент внутри HTML-документа может быть размещен вне нормального потока документа. Как говорилось в прошлом уроке, нормальным потоком документа является поток, при котором все элементы выводятся в той последовательности, в которой они заданы внутри HTML-документа.</p>
1
<p>Позиционирование является большим модулем в CSS и позволяет описать, как элемент внутри HTML-документа может быть размещен вне нормального потока документа. Как говорилось в прошлом уроке, нормальным потоком документа является поток, при котором все элементы выводятся в той последовательности, в которой они заданы внутри HTML-документа.</p>
2
<p>Одним из часто применяемых видов позиционирования является<em>относительное позиционирование</em>. Главный вопрос, который может возникнуть с самого начала: "Относительно чего будет позиционироваться элемент?". Ответ достаточно простой: относительно своей изначальной позиции. Элемент остается в потоке документа, и его место не стараются занять другие элементы.</p>
2
<p>Одним из часто применяемых видов позиционирования является<em>относительное позиционирование</em>. Главный вопрос, который может возникнуть с самого начала: "Относительно чего будет позиционироваться элемент?". Ответ достаточно простой: относительно своей изначальной позиции. Элемент остается в потоке документа, и его место не стараются занять другие элементы.</p>
3
<p>Относительное позиционирование часто используют для визуальных эффектов, например, для создания тени с помощью второго блока или для небольшой анимации при наведении курсора мыши на элемент.</p>
3
<p>Относительное позиционирование часто используют для визуальных эффектов, например, для создания тени с помощью второго блока или для небольшой анимации при наведении курсора мыши на элемент.</p>
4
<p><a>https://codepen.io/hexlet/pen/zYOwbzz</a></p>
4
<p><a>https://codepen.io/hexlet/pen/zYOwbzz</a></p>
5
<p>При наведении на элемент (для этого можно использовать селектор .animate-hover:hover) мы использовали CSS-правило<strong>position: relative</strong>, что означает применение относительного позиционирования для элемента. Управлять расположением элемента со свойством<strong>position</strong>можно с помощью четырех CSS-свойств:</p>
5
<p>При наведении на элемент (для этого можно использовать селектор .animate-hover:hover) мы использовали CSS-правило<strong>position: relative</strong>, что означает применение относительного позиционирования для элемента. Управлять расположением элемента со свойством<strong>position</strong>можно с помощью четырех CSS-свойств:</p>
6
<ul><li><strong>top</strong></li>
6
<ul><li><strong>top</strong></li>
7
<li><strong>right</strong></li>
7
<li><strong>right</strong></li>
8
<li><strong>bottom</strong></li>
8
<li><strong>bottom</strong></li>
9
<li><strong>left</strong></li>
9
<li><strong>left</strong></li>
10
</ul><p>Каждое из этих свойств принимает значение, на которое будет "сдвинут" элемент. Эти значения не обязательно должны быть положительными, свойства также принимают и отрицательные значения. Попробуйте поизменять значения в примере выше и увидеть, как работают различные значения свойств<strong>top</strong>,<strong>right</strong>,<strong>bottom</strong>и<strong>left</strong>.</p>
10
</ul><p>Каждое из этих свойств принимает значение, на которое будет "сдвинут" элемент. Эти значения не обязательно должны быть положительными, свойства также принимают и отрицательные значения. Попробуйте поизменять значения в примере выше и увидеть, как работают различные значения свойств<strong>top</strong>,<strong>right</strong>,<strong>bottom</strong>и<strong>left</strong>.</p>
11
<p>Примеры в уроке построены на поведении элемента при использовании :hover, но позиционирование может использоваться не только при наведении, а на любом элементе</p>
11
<p>Примеры в уроке построены на поведении элемента при использовании :hover, но позиционирование может использоваться не только при наведении, а на любом элементе</p>