Академия: Курс Сodecademy - Learn HTML & CSS - Позиционирование и отображение элементов в CSS
![](https://img.golos.io/proxy/https://s26.postimg.org/872b2258p/html-css.jpg)
В этом уроке будут рассмотрены следующие пять свойств для настройки положения элементов в браузере: position, display, z-index, float, clear.
Каждое из этих свойств позволит нам размещать и просматривать элементы на веб-странице.
![](https://img.golos.io/proxy/https://s26.postimg.org/ggcqdmz0p/image.jpg)
Свойство: position
Свойство position - устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Может принимать одно из нескольких значений: static, relative, absolute, fixed.
Position: static
static - значение по умолчанию (его не нужно указывать).
![](https://img.golos.io/proxy/https://s26.postimg.org/6mu5epi2x/qaz.jpg)
Важно понимать, что если нам для отображения элемента предпочтительнее позиция по умолчанию, нам не нужно устанавливать его свойство position.
Position: relative
Это значение позволяет нам позиционировать элемент относительно его статической позиции по умолчанию.
.box-bottom {
background-color: DeepSkyBlue;
position: relative;
top: 20px;
left: 50px;
}
- top - перемещает элемент вниз;
- bottom - перемещает элемент вверх;
- left - перемещает элемент вправо;
- right - перемещает элемент влево.
![](https://img.golos.io/proxy/https://s26.postimg.org/uzihsxdc9/zaq.jpg)
Единицы для свойств смещения могут быть указаны в пикселях, em или процентах.
Position: absolute
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого "видимой областью".
.box-bottom {
background-color: DeepSkyBlue;
position: absolute;
top: 20px;
left: 50px;
}
![](https://img.golos.io/proxy/https://s26.postimg.org/4wchzcfd5/sdsdd.jpg)
Position: fixed
.box-bottom {
background-color: DeepSkyBlue;
position: fixed;
top: 20px;
left: 50px;
}
Этот метод часто используется для создания навигационных баров на веб-странице.
Свойство: z-Index
Свойство 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;
}
![](https://img.golos.io/proxy/https://s26.postimg.org/fir5df4jt/aaa.jpg)
Свойство: display
display - многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. Может принимать следующие некоторые значения: inline, block, inline-block.
display: inline
Значение 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;
}
![](https://img.golos.io/proxy/https://s26.postimg.org/wrlki29c9/aaa1.jpg)
Свойство: clear
- left - отменяет обтекание с левого края элемента;
- right - отменяет обтекание с правого края элемента;
- both - отменяет обтекание элемента одновременно с правого и левого края;
- none - отменяет действие свойства clear.
div {
 width: 200px;
 float: left;
}
div.special {
 clear: left;
}
Подводим итоги
- Свойство position позволяет указать позицию элемента тремя различными способами.
- Значение relative позволяет нам позиционировать элемент относительно его статической позиции по умолчанию.
- Если задано значение absolute, то позиция элемента может быть закреплена в любой части веб-страницы, но сам элемент будет перемещаться вне поля зрения при прокрутке страницы.
- Если значение установлено в fixed, то позиция элемента может быть привязана к любой части веб-страницы.
- Свойство z-index указывает на то, как далеко сзади или как далеко спереди элемент может появляется на веб-странице.
- Свойство float может перемещать элементы на веб-странице так далеко, насколько это возможно.
- Применяя свойство clear, мы можем очистить левую или правую сторону элемента.
Свое мнение и личные впечатления
Предыдущие части курса Сodecademy - "Learn HTML & CSS"
4.1 Стилизация с помощью CSS (Цвета)
4.2 Стилизация с помощью CSS (Шрифты)
Конспект подготовлен для Академии Голоса @academy.