CSS - позиционирование

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

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

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

Относительное позиционирование изменяет положение HTML-элемента относительно того места, где он обычно появляется. Таким образом, "left: 20" добавляет 20 пикселей к ЛЕВОЙ позиции элемента.

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

  • Сдвинуть влево - используйте отрицательное значение влево .
  • Сдвинуть вправо - используйте положительное значение для левого .
  • Вверх - используйте отрицательное значение для вершины .
  • Вниз - используйте положительное значение для вершины .

NOTE- Вы можете использовать нижнее или правое значение так же, как верхнее и левое .

Вот пример -

<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.

  • Сдвинуть влево - используйте отрицательное значение влево .
  • Сдвинуть вправо - используйте положительное значение для левого .
  • Вверх - используйте отрицательное значение для вершины .
  • Вниз - используйте положительное значение для вершины .

NOTE- Вы можете использовать нижнее или правое значение так же, как верхнее и левое.

Вот пример -

<html>
   <head>
   </head>

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

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

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

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

  • Сдвинуть влево - используйте отрицательное значение влево .
  • Сдвинуть вправо - используйте положительное значение для левого .
  • Вверх - используйте отрицательное значение для вершины .
  • Вниз - используйте положительное значение для вершины .

NOTE- Вы можете использовать нижнее или правое значение так же, как верхнее и левое .

Вот пример -

<html>
   <head>
   </head>

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