Позиционирование в CSS

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

Теперь мы увидим все связанные с CSS позиционирующие свойства с примерами -

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

Относительное позиционирование изменяет положение элемента HTML относительно того, где он обычно появляется. Таким образом, «left: 20» добавляет 20 пикселей в положение LEFT элемента.

Вы можете использовать два значения top и left вместе со свойством position для перемещения элемента HTML в любом месте документа HTML.

• Переместить влево - используйте отрицательное значение для left.
• Переместить вправо - используйте положительное значение для left.
• Переместить вверх - используйте отрицательное значение для top.
• Переместить вниз - используйте положительное значение для top.

ПРИМЕЧАНИЕ. Вы можете использовать bottom или right значения так же, как top и left.

Вот пример -

< html>
   < head>
   < /head>
   < body>
      < div style="position:relative;left:80px;top:2px;background-color:yellow;">
      This div has relative positioning.
      < /div>
   < /body>
< /html>

Это приведет к следующему результату -

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

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

Вы можете использовать два значения top и left вместе со свойством position для перемещения элемента HTML в любом месте документа HTML.

• Переместить влево - используйте отрицательное значение для left.
• Переместить вправо - используйте положительное значение для left.
• Переместить вверх - используйте отрицательное значение для top.
• Переместить вниз - используйте положительное значение для top.

ПРИМЕЧАНИЕ. Вы можете использовать bottom или right значения так же, как top и left.

Вот пример -

< html>
   < head>
   < /head>
   < body>
      < div style="position:absolute; left:80px; top:20px; background-color:yellow;">
      This div has absolute positioning.
      < /div>
   < /body>
< /html>

Это приведет к следующему результату -

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

Фиксированное позиционирование позволяет фиксировать положение элемента в определенном месте на странице, независимо от прокрутки. Указанные координаты будут относиться к окну браузера.

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

• Переместить влево - используйте отрицательное значение для left.
• Переместить вправо - используйте положительное значение для left.
• Переместить вверх - используйте отрицательное значение для top.
• Переместить вниз - используйте положительное значение для top.

ПРИМЕЧАНИЕ. Вы можете использовать bottom или right значения так же, как top и left.

Вот пример -

< html>
   < head>
   < /head>
   < body>
      < div style="position:fixed; left:80px; top:20px; background-color:yellow;">
      This div has fixed positioning.
      < /div>
   < /body>
< /html>

Это приведет к следующему результату -

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!