Здравствуйте! Сегодня я хочу рассказать о таком полезном свойстве в CSS как позиуионирование. CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице. Основным свойством, которые управляют позиционированием в CSS, является свойство position. Это свойство может принимать одно из следующих значений:
-
static: стандартное позиционирование элемента, значение по умолчанию
-
absolute: элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static
-
relative: элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для абсолютного позиционированния вложенных в него элементов
-
fixed: элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не меняют положения при прокрутке
Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).
Абсолютное позиционирование
Область просмотра браузера имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее свойство CSS: left (отступ от края слева), right (отступ от края справа), top (отступ от края контейнера сверху) и bottom (отступ снизу). Значения этих свойств указываются в пикселях, em или процентах. Необязательно задавать значения для всех четырех сторон. Как правило, устанавливают только два значения - отступ от верхнего края top и отступ от левого края left.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Блочная верстка в HTML5</title>
<style>
.header {
position: absolute;
left: 100px;
top: 50px;
width: 430px;
height: 100px;
background-color: rgba(128, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="header"></div>
<p>HELLO WORLD</p>
</body>
</html>
Читать далее
Это интересно
+1
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
-
Как покупать ссылки на Miralinks
(1)
Stanzeka
,
17.10.2021
-
Обзор новинки от компании Plantronics – беспроводных наушников BackBeat Go 600
(2)
Onix
,
17.08.2021
-
Как переустановить Windows 7 с сохранением данных
(2)
Horov
,
27.05.2021
-
Нужно ли использовать антивирус на ПК
(1)
gennady 44
,
10.05.2021
-
Лучшие бесплатные альтернативы MS Office
(2)
Horov
,
03.04.2021
-
«Набросок на фрагменте экрана» для создания скриншотов
(1)
gennady 44
,
25.02.2021
-
Microsoft Defender Offline для поиска трудно удаляемых вирусов
(1)
IJ
,
12.02.2021
-
Как заблокировать программе выход в интернет на Windows?
(2)
GGarry
,
12.01.2021
-
Создание точки восстановления Windows в командной строке или в PowerShell
(2)
bigluzer131261
,
12.01.2021
-
Программа ImBatch для пакетной обработки фотографий
(1)
GGarry
,
11.01.2021
20251222170918