Академия: Курс Сodecademy - Learn HTML & CSS - Позиционирование и отображение элементов в CSS

Свойство: position

Position: static

 static - значение по умолчанию (его не нужно указывать).

Важно понимать, что если нам для отображения элемента предпочтительнее позиция по умолчанию, нам не нужно устанавливать его свойство position.

Position: relative

.box-bottom {
 background-color: DeepSkyBlue;
 position: relative;
 top: 20px;
 left: 50px;
}

• top - перемещает элемент вниз;
• bottom - перемещает элемент вверх;
• left - перемещает элемент вправо;
• right - перемещает элемент влево.

Единицы для свойств смещения могут быть указаны в пикселях, em или процентах.

Position: absolute

.box-bottom {
 background-color: DeepSkyBlue;
 position: absolute;
 top: 20px;
 left: 50px;
}

Position: fixed

.box-bottom {
 background-color: DeepSkyBlue;
 position: fixed;
 top: 20px;
 left: 50px;
}

Этот метод часто используется для создания навигационных баров на веб-странице.

Свойство: z-Index

.box-top {
 background-color: Aquamarine;
 position: relative;
 z-index: 2;
}

.box-bottom {
 background-color: DeepSkyBlue;
 position: absolute;
 top: 20px;
 left: 50px;
 z-index: 1;
}

Свойство: display

display: inline

h1 {
 display: inline;
}

display: block

strong {
 display: block;
}

display: inline-block

Свойство: float

• left - выравнивает элемент по левому краю, а все остальные элементы, обтекают его по правой стороне;
• right - выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.

.boxes {
 width: 120px;
 height: 70px;
}

.box-bottom {
 background-color: DeepSkyBlue;
 float: right;
}

Свойство: clear

• left - отменяет обтекание с левого края элемента;
• right - отменяет обтекание с правого края элемента;
• both - отменяет обтекание элемента одновременно с правого и левого края;
• none - отменяет действие свойства clear.

div {
 width: 200px;
 float: left;
}

div.special {
 clear: left;
}

Подводим итоги

1. Свойство position позволяет указать позицию элемента тремя различными способами.
2. Значение relative позволяет нам позиционировать элемент относительно его статической позиции по умолчанию.
3. Если задано значение absolute, то позиция элемента может быть закреплена в любой части веб-страницы, но сам элемент будет перемещаться вне поля зрения при прокрутке страницы.
4. Если значение установлено в fixed, то позиция элемента может быть привязана к любой части веб-страницы.
5. Свойство z-index указывает на то, как далеко сзади или как далеко спереди элемент может появляется на веб-странице.
6. Свойство float может перемещать элементы на веб-странице так далеко, насколько это возможно.
7. Применяя свойство clear, мы можем очистить левую или правую сторону элемента.

Свое мнение и личные впечатления

Предыдущие части курса Сodecademy - "Learn HTML & CSS"

1. Основы HTML

2. HTML-контент

3. Основы CSS

4.1 Стилизация с помощью CSS (Цвета)

4.2 Стилизация с помощью CSS (Шрифты)

5. Организация HTML & CSS

6. Блочная модель CSS Box

Конспект подготовлен для Академии Голоса @academy.