Проектирование и дизайн ИС Практическая работа №21

Практическое занятие №21

Цель работы: Размещение элементов в определённом месте на странице. 

Приобретаемые умения и навыки: Умение работать с html, CSS.

Норма времени: 2 часа.

Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet

Для работы с позиционированием в CSS используются свойства position. Вот некоторые из них и их значения:

Static. Значение по умолчанию, элемент позиционируется в соответствии с его местом в потоке документа. 

Relative. Элемент позиционируется относительно своего исходного положения в потоке документа. При использовании этого значения можно задать дополнительные параметры, такие как top, bottom, left и right, которые указывают на смещение элемента относительно его стандартного местоположения. 

Absolute. Задаёт точное местоположение элемента на странице, независимо от других элементов на странице. При использовании значения можно задать параметры top, bottom, left и right, чтобы определить точное местоположение элемента. 

Fixed. Задаёт элемент на фиксированном месте на странице, независимо от прокрутки страницы. 

Sticky. Элемент остаётся на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции. 

Абсолютное позиционирование позволяет «выдернуть» элемент из потока документа и разместить его в другом месте относительно окна браузера или других элементов на веб-странице. Элемент позиционируется относительно ближайшего позиционированного предка. 

Относительное позиционирование смещает элемент относительно его положения в потоке документа, или относительно его текущей позиции. Его текущее положение можно сместить с помощью определённых CSS-свойств, таких как left, top, right и bottom. 

Результат:

Контрольные вопросы:

1. Что такое позиционирование в CSS и зачем оно нужно? 

2. Какие значения может принимать свойство position?

1