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>