Положение элементов HTML играет жизненно важную роль в организации компонентов веб-страницы. В частности, положение элементов можно настроить с помощью CSS. позиция ' имущество. Это свойство может быть связано со свойствами смещения, такими как свойства сверху, слева, справа и снизу, предоставляя определенные значения для настройки элемента на странице. Однако ' абсолютный ” позиционированные элементы могут быть скорректированы относительно ближайшего позиционируемого элемента.
Этот пост объяснит абсолютное позиционирование CSS.
CSS-свойство «позиция»
“ позиция » в CSS можно использовать для настройки положения элемента. Различные значения свойства position: фиксированные, абсолютные, относительные, статические и фиксированные. Эти значения задаются свойствами смещения, такими как верхнее, правое, левое и нижнее, для настройки положения элемента.
Как применить абсолютное позиционирование CSS?
Абсолютное позиционирование элемента может быть применено с помощью CSS « позиция ” свойство со значением “ абсолютный ». Элемент с абсолютной позицией корректируется в соответствии с его ближайшим позиционированным родительским элементом. Но если предок не позиционирован, он будет корректироваться относительно основной части документа.
Пример
Давайте разберемся с концепцией на практическом примере.
Шаг 1: Создайте HTML-файл
В HTML-файле внутри элемента body добавьте div с именем класса « главный ». Затем внутри созданного div добавьте HTML-тег , связанный со следующими атрибутами:
-
- “ источник ” содержит ссылку на изображение.
- “ учебный класс ” используется в CSS для стилизации элементов.
- “ все Атрибут определяет текст, который отображается вместо изображения, если изображение не загружается на страницу.
- “ все Атрибут определяет текст, который отображается на странице вместо изображения, если изображение не загружается на странице.
Затем добавьте еще один div, содержащий элементы заголовка и абзаца h1 и p:
< див учебный класс знак равно 'главный' >< див учебный класс знак равно 'содержание' >
< изображение источник знак равно 'images/linuxlogo.png' учебный класс знак равно 'дом' все знак равно 'логотип линукс' ширина знак равно '80 пикселей' >
< h1 > Абсолютное позиционирование CSS h1 >
< п > Здравствуйте, команда Linuxhint. ! п >
див >
див >
В CSS для оформления HTML-элементов используется несколько свойств стиля.
Шаг 2: Стилизуйте «все» элементы
* {семейство шрифтов: Verdana, Geneva, Tahoma, без засечек;
}
HTML-элементы стилизованы с использованием « семейство шрифтов ” свойство со значением “ Вердана, Женева, Тахома, без засечек ». Этот список значений гарантирует, что если браузер не поддерживает первый стиль, будет применен другой.
Шаг 3: Стиль «домашний» div
.дом {положение: абсолютное;
верх: 50 пикселей;
слева: 45 пикселей;
}
Ниже приведены свойства, примененные к « дом ” раздел:
-
- “ позиция » задает положение элемента. Здесь добавлено « абсолютный ” поместит элемент относительно раздела body HTML.
- “ вершина ” используется для вертикальной регулировки элемента.
- “ оставил ” используется для регулировки элемента по горизонтали.
Шаг 4: Стиль div «content»
.содержание {цвет фона: кадетский синий;
ширина: 300 пикселей;
высота: 250 пикселей;
отступ слева: 40px;
поле слева: 80 пикселей;
}
Ниже приведены свойства CSS, которые применяются к « содержание ” раздел:
-
- “ фоновый цвет » устанавливает цвет фона элемента.
- “ ширина » задает ширину элемента.
- “ рост » задает высоту элемента.
- “ padding-left » установлено, чтобы добавить пространство слева от содержимого элемента.
- “ поле слева ” задает пространство слева от элемента.
На данный момент наша веб-страница будет выглядеть так:
Из приведенного выше результата видно, что изображение дома div расположено на расстоянии 50 пикселей сверху и 45 пикселей слева от тела документа. Более того, позиция домашнего div устанавливается относительно основного раздела HTML.
Как настроить положение элемента «относительно» позиционированного родительского элемента?
Этот раздел поможет вам настроить положение элемента относительно ближайшего родительского элемента.
Установите свойство «position» div «content»
положение: родственник;
Чтобы настроить положение элемента относительно родительского элемента, установите « позиция ” свойство родительского элемента на “ родственник ' стоимость.
Установите свойство «position» элемента «img»
.дом {положение: абсолютное;
верх: 100 пикселей;
слева: 220 пикселей;
}
Здесь:
-
- “ позиция ” со значением, установленным как “ абсолютный ” будет позиционироваться относительно родительского элемента (то есть позиция содержимого div устанавливается с относительным значением).
- “ вершина ” используется для установки позиции элемента сверху.
- “ оставил ” используется для установки позиции элемента слева.
Вывод
Из результата видно, что изображение было расположено относительно своего родительского элемента div и выглядит подходящим.
Заключение
CSS « позиция ” используется для установки положения HTML-элементов. Это свойство может оцениваться как фиксированное, относительное, абсолютное, липкое и статическое. “ абсолютный » будет позиционировать элемент, соответствующий расположенному рядом с ним родительскому элементу. Этот пост объяснил абсолютное позиционирование CSS на практическом примере.