Позиционирование элементов в CSS

25 просмотров Время на прочтение: 2 минут(ы)

Пример 1

Свойство “background-color” задаёт первому HTML элементу “div” красный цвет, а второму – зелёный.

Значение “absolute” свойства “position” указывает, что координаты второго элемента задаются относительно веб-страницы. Также можно указать значение “fixed”, что будет определять координаты относительно экрана. При прокрутке веб-страницы позиция элемента не изменится. А также можно указать значение “relative”, что задаст координаты относительно текущей позиции элемента.

Горизонтальную координату второго элемента – левый край задаёт свойство “left”, а вертикальную координату – верхний край задаёт свойство “top”. Также можно определить правый край – через свойство “right” и нижний край – через свойство “bottom”.

Пример 2

Если у первого HTML элемента свойство “position” имеет значения “absolute”, “fixed” или “relative”, то у второго вложенного элемента со свойством “position”, имеющем значение “absolute”, координаты будут отсчитываться относительно первого элемента, а не веб-страницы. В данном примере у первого элемента с атрибутом “id” равным “layer1” свойство “position” имеет значение “relative”. Поэтому у вложенного в него элемента с атрибутом “id” равным “layer2” и со свойством “position” равным “absolute” координаты отсчитываются относительно первого элемента.

Пример 3

Свойство “z-index” определяет позицию перспективы. Значение представляет целое число. Чем больше значение, тем ближе элемент, чем меньше, – тем дальше.

Свойство “opacity” задаёт полупрозрачность синего квадрата. Значение “opacity” указывается от “0” – полная прозрачность до “1” – полная непрозрачность.

РубрикиCSS

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

©2024 Шигорин Сергей Владимирович
Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять
Top.Mail.Ru
Каталог сайтов Всего.ру
Белый каталог сайтов PopCat.ru