CSS поможет вам позиционировать ваш HTML-элемент. Вы можете поместить любой HTML-элемент в любое удобное вам место. Вы можете указать, хотите ли вы, чтобы элемент располагался относительно его естественного положения на странице или абсолютного на основе его родительского элемента.
Теперь мы увидим все связанные с CSS свойства позиционирования на примерах —
Относительное позиционирование
Относительное позиционирование изменяет положение элемента HTML относительно того места, где оно обычно появляется. Таким образом, «left: 20» добавляет 20 пикселей в левую позицию элемента.
Вы можете использовать два значения top и left вместе со свойством position, чтобы переместить элемент HTML в любое место HTML-документа.
- Переместить влево — использовать отрицательное значение для левого .
- Переместить вправо — использовать положительное значение для левого .
- Move Up — Используйте отрицательное значение для верхней части .
- Переместить вниз — используйте положительное значение для верхней части .
ПРИМЕЧАНИЕ. — Можно использовать нижнее или правое значения так же, как верхнее и левое .
Вот пример —
<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-документа.
- Переместить влево — использовать отрицательное значение для левого .
- Переместить вправо — использовать положительное значение для левого .
- Move Up — Используйте отрицательное значение для верхней части .
- Переместить вниз — используйте положительное значение для верхней части .
ПРИМЕЧАНИЕ. — Можно использовать нижнее или правое значения так же, как верхнее и левое.
Вот пример —
<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-документа.
- Переместить влево — использовать отрицательное значение для левого .
- Переместить вправо — использовать положительное значение для левого .
- Move Up — Используйте отрицательное значение для верхней части .
- Переместить вниз — используйте положительное значение для верхней части .
ПРИМЕЧАНИЕ. — Можно использовать нижнее или правое значения так же, как верхнее и левое .
Вот пример —