arey1983

7 лет назад

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

Всем доброго времени суток и хорошего настроения! Продолжаю изучать курс online-образовательного портала Сodecademy - "Learn HTML & CSS".

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

Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное, которые в CSS можно задать рядом свойств.

В этом уроке будут рассмотрены следующие пять свойств для настройки положения элементов в браузере: position, display, z-index, float, clear.

Каждое из этих свойств позволит нам размещать и просматривать элементы на веб-странице.

Свойство: position

Каждый из элементов на изображении выше занимает свое собственное пространство и, следовательно, не перекрывает друг друга.

Свойство position - устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Может принимать одно из нескольких значений: static, relative, absolute, fixed.

Position: static

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

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

Position: relative

Один из способов изменить позицию элемента по умолчанию - это установить его свойство position в relative.

Это значение позволяет нам позиционировать элемент относительно его статической позиции по умолчанию.

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

В приведенном выше примере div позиционируется с использованием двух из четырех свойств смещения. Действительными свойствами смещения являются:

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

В приведенном выше примере div будет перемещен вниз на 20 пикселей и вправо на 50 пикселей от статической позиции по умолчанию. На изображении ниже отображается новое положение окна.

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

Position: absolute

Другим способом изменения положения элемента на веб-странице является абсолютное позиционирование.

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого "видимой областью".

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

В приведенном выше примере div .box-bottom будет перемещен вниз и вправо от верхнего левого угла браузера.

Position: fixed

Чтобы зафиксировать элемент в определенной позиции на странице (независимо от прокрутки пользователя), необходимо установить его свойство position в fixed.

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

В приведенном выше примере div останется в фиксированном положении, независимо от того, где пользователь прокручивает страницу.

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

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

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Свойство 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;
}

Свойство z-index перемещает элемент .box-top вперед, потому что его значение больше, чем у элемента .box-bottom.

Свойство: display

Каждый элемент HTML имеет значение отображения по умолчанию, которое указывает, может ли он разделять горизонтальное пространство с другими элементами. Некоторые элементы заполняют все пространство браузера слева направо независимо от размера их содержимого. Другие элементы занимают столько горизонтального пространства, сколько требуется для их содержимого и могут находиться непосредственно рядом с другими элементами.

display - многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. Может принимать следующие некоторые значения: inline, block, inline-block.

display: inline

Свойство display при помощи значения inline предоставляет возможность сделать любой элемент встроенным.

Значение inline отменяет особенность автоматического переноса элементов, поэтому их содержимое начинается с того места, где закончился предыдущий элемент.

h1 {
display: inline;
}

В этом примере браузер будет отображать элементы h1 в той же строке, что и другие встроенные элементы непосредственно перед ними или после них.

display: block

Значение block делает любой элемент блочным.

strong {
display: block;
}

В приведенном выше примере все элементы strong будут отображаться в отдельном блоке, без содержимого с обеих сторон.

display: inline-block

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

При этом его внутренняя часть распознается браузером как блочная, а сам элемент - как встроенный.

Свойство: float

Если нам необходимо переместить элемент как можно дальше на веб-странице, мы можем использовать свойство float, которое может принимать следующие значения:

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

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

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

В приведенном выше примере элемент .box-bottom выравнивается по правому краю.

Свойство: clear

Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Может принимать следующие значения:

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

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

div.special {
 clear: left;
}

Код в приведенном выше примере перемещает все div на странице влево.

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

Давайте посмотрим чему мы научились и что нового мы для себя узнали:

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

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

Данный урок мне был крайне интересен. Ведь в сочетании со знаниями блочной модели, понимание того как все эти элементы позиционируются и отображаются на веб-странице является крайне важным для начинающего веб-разработчика. Радует, что материал излагается в довольно простой форме с приведением многочисленных примеров.