Справочник css: Самоучитель CSS | htmlbook.ru — Вебджем.рф

Содержание

Справочник CSS ⚡️ HTML и CSS с примерами кода

Справочник свойств CSS с примерами кода.

@-правила и модификаторы

!important

@charset
@container
@import
@namespace
@media
@supports
@document
@page
@font-face
@keyframes
@viewport
@counter-style
@font-feature-values

Псевдо-классы

:active
:any-link
:blank
:checked
:current()
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:future
:has()
:host
:host()
:host-context()
:hover
:indeterminate
:in-range
:invalid
:is()
:lang()
:last-child
:last-of-type
:left
:link
:local-link
:not()
:nth-child()
:nth-col()
:nth-last-child()
:nth-last-col()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:target
:target-within
:user-invalid
:valid
:visited
:where()

Псевдо-элементы

::after
::backdrop
::before
::cue
::first-letter
::first-line
::grammar-error
::marker
::part()
::placeholder
::selection
::slotted()
::spelling-error

Grid

grid
grid-area
grid-auto-columns
grid-auto-flow

grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

Flex

flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
order

Выравнивание

justify-content
align-content
place-content
justify-items
align-items
place-items
justify-self
align-self
place-self
row-gap
column-gap
gap

Позиционирование

bottom
clear
display
float
left
position
right
top
z-index

Блоки

height
width

max-height
max-width
min-height
min-width

margin
margin-bottom
margin-left
margin-right
margin-top
margin-trim

padding
padding-bottom
padding-left
padding-right
padding-top

overflow
overflow-x
overflow-y
visibility

Фон и границы

background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size

border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse

border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
box-shadow

Интерфейс

appearance
box-sizing
caret-color
cursor
outline
outline-width
outline-style
outline-color
outline-offset
resize
text-overflow
user-select

Переходы, Анимации и Перемещения

@keyframes

animation
animation-delay

animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

transition
transition-delay
transition-duration
transition-property
transition-timing-function

offset
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate

Трансформации

backface-visibility
perspective
perspective-origin
transform
transform-box
transform-origin
transform-style

Текст

hanging-punctuation
hyphens
letter-spacing
line-break
overflow-wrap
paint-order
tab-size
text-align
text-align-last
text-indent
text-justify
text-size-adjust
text-transform
white-space
word-break
word-spacing

letter-spacing
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-decoration-skip
text-decoration-skip-ink
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-rendering
text-shadow
text-underline-position
text-transform
white-space
word-spacing

Шрифт и Цвет

@font-face

font
font-family
font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps

font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
font-weight
line-height

aspect-ratio
color
color-scheme
opacity
print-color-adjust

Режимы письма

direction
text-combine-upright
text-orientation
unicode-bidi
writing-mode

Изображения, фильтры, композиция

image-orientation
image-rendering
image-resolution
object-fit
object-position

linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
conic-gradient()
repeating-conic-gradient()
url()
element()
image()
cross-fade()

backdrop-filter
filter

background-blend-mode
isolation
mix-blend-mode

contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
@container
content-visibility

Списки, счетчики, генерируемый контент

counter-increment
counter-reset
list-style-image
list-style-type
list-style-position
list-style

content
quotes

Колонки и таблицы

column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns

border-collapse
border-spacing
caption-side
empty-cells
table-layout
vertical-align

Страницы

page-break-after
page-break-before

page-break-inside

@page
:blank
:first
:left
:right

Маски и фигуры

clip-path
mask
mask-border
mask-border-mode
mask-border-outset
mask-border-repeat
mask-border-slice
mask-border-source
mask-border-width
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type

shape-image-threshold
shape-margin
shape-outside

Фрагментация

box-decoration-break
break-after
break-before
break-inside
orphans
widows

Pointer Events

pointer-events
touch-action
scroll-behavior

Логические размеры

block-size
inline-size
max-block-size
max-inline-size
min-block-size
min-inline-size

Логические границы

border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-inline
border-inline-color
border-inline-end
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-inline-style
border-inline-width
border-start-start-radius
border-start-end-radius
border-end-start-radius
border-end-end-radius

Логические блоки

margin-block
margin-block-end

margin-block-start
margin-inline
margin-inline-end
margin-inline-start

overflow-block
overflow-inline

padding-block
padding-block-end
padding-block-start
padding-inline
padding-inline-end
padding-inline-start

Логическое позиционирование

inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start

Справочник CSS3.

Кратко, быстро, под рукой (А. Хрусталев) 679 ₽

478 ₽

+ до 71 бонуса

Купить

Цена на сайте может отличаться от цены в магазинах сети. Внешний вид книги может отличаться от изображения на сайте.

В наличии

Создание сайтов

Работая с каскадными таблицами стилей (CSS), читатель может быстро найти нужный ответ в этом удобном кратком справочнике, в котором предоставляются все основные сведения, необходимые для оперативной реализации CSS-стилей. Этот карманный справочник идеально подходит для веб-разработчиков от промежуточного уровня до уровня высокой квалификации, а его пятое издание исправлено согласно спецификации CSS3. Помимо полного перечня в алфавитном порядке селекторов и свойств CSS3, здесь представлены краткое введение в основные понятия CSS, а также сведения о таких новых средствах стилевого оформления.

Как получить бонусы за отзыв о товаре

Сделайте заказ в интернет-магазине

Напишите развёрнутый отзыв от 300 символов только на то, что вы купили

Дождитесь, пока отзыв опубликуют.

Если он окажется среди первых десяти, вы получите 30 бонусов на Карту Любимого Покупателя. Можно писать неограниченное количество отзывов к разным покупкам – мы начислим бонусы за каждый, опубликованный в первой десятке.

Правила начисления бонусов

бесполезная книга

Часть серии

Плюсы

Качественный

Минусы

Дороговат

Книга «Справочник CSS3. Кратко, быстро, под рукой» есть в наличии в интернет-магазине «Читай-город» по привлекательной цене. Если вы находитесь в Москве, Санкт-Петербурге, Нижнем Новгороде, Казани, Екатеринбурге, Ростове-на-Дону или любом другом регионе России, вы можете оформить заказ на книгу А. Хрусталев «Справочник CSS3. Кратко, быстро, под рукой» и выбрать удобный способ его получения: самовывоз, доставка курьером или отправка почтой. Чтобы покупать книги вам было ещё приятнее, мы регулярно проводим акции и конкурсы.

Полное руководство по CSS — справочник по каскадным таблицам стилей

Содержание

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

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

всего за $24,99
в качестве бонуса при покупке CSS-редактора Style Master (Windows и MacOS) за 59,99 долларов США
как часть большинства наших курсов веб-разработки на основе стандартов для самостоятельного обучения

С чего начать?

Все зависит от того, что вы ищете.

Новичок в CSS? Начните с чтения введения к этому руководству, чтобы понять, что такое каскадные таблицы стилей и как они работают. Для получения более подробной информации о подходе взгляните также на Учебное пособие по CSS Style Master. Это руководство также входит в состав демонстрационной версии нашего редактора CSS Style Master для Windows и Mac OS X.
Ищете что-то конкретное? Если вам нужна подробная информация о свойстве CSS, селекторе или другой функции, вы обязательно найдете ее в оглавлении ниже.

Пока вы здесь, не пропустите наши статьи, руководства и другие наши ресурсы по CSS.

Для кого предназначено это руководство?

Что мы будем освещать?

Как пользоваться этим руководством

Информация о поддержке браузера

Введение в CSS

Откуда берутся таблицы стилей?

W3C

История спецификаций CSS

Мобильный профиль CSS

Почему не все используют CSS?

Зачем мне использовать CSS?

Что такое таблица стилей?

Собственные расширения CSS

CSS v HTML

Как работают таблицы стилей?

Части таблицы стилей

Синтаксис таблицы стилей

Связывание и встраивание таблицы стилей

Внедрение таблиц стилей

Связывание с таблицами стилей

Операторы

@rules

@import

@media

@page

Комментарии 900 35

Теги комментариев HTML

Правила

Знакомство с селекторами

Что делают селекторы делать?

Типы селекторов

Селекторы типов

Типы элементов

Селекторы классов

Селекторы ID

Селекторы потомков

Селекторы псевдоклассов ссылок

Селекторы псевдоэлементов

Селекторы динамических псевдоклассов

Селекторы языковых псевдоклассов

Селекторы дочерних элементов

Селекторы первых дочерних элементов

Селекторы соседних братьев и сестер

9 0020 Селекторы атрибутов

Введение в свойства

Что такое свойства?

Как читать руководство по свойствам

Свойства стиля текста

цвет

вес шрифта

семейство шрифтов

размер шрифта

вариант шрифта

стиль шрифта

оформление текста

преобразование текста

свойства макета текста

интервал между буквами

слово -spacing

высота строки

вертикальное выравнивание

text-indent

text-align

direction

unicode-bidi

Свойства фона

background-color

background-image

background-at тач

Право-повторное заново

Справочная позиция

Фоны

.

-width

border-color

border-style

border, border-top, border-left, border-bottom, border-right

Margin properties

margin

margin-top

margin-left

нижняя граница

margin-right

Свойства заполнения

padding

padding-top

padding-left

padding-bottom

padding-right

Макет страницы properties

Введение в позиционирование с помощью CSS

Общая картина

Заметка о «слоях»

И

Способы позиционирования

Статическое позиционирование

Абсолютное позиционирование

Фиксированное позиционирование

Относительное расположение

Положение

Верх

Левый

Нижний

Правый

Ширина

Минимальная ширина

9003 4 максимальная ширина

высота

минимальная высота

максимальная высота

z-индекс

видимость

переполнение

float

clear

clip

свойства типа элемента

display

white-space

list -стиль-тип

list-style-image

list-style-position

list-style

border-collapse

border-spacing

caption-side

empty-cells

table- макет

Свойства пользовательского интерфейса

курсор

контур

цвет контура

стиль контура

ширина контура

значения

значения длины

значения в процентах

значения цвета 9 0035

Значения ключевых слов

Значения формы

Расширенное введение в CSS

Каскад и наследование

Каскад

Управление стилем на больших сайтах с помощью @import

Специфичность

Наследование

Ген номинальный контент

контент

котировки

Счетчики и свойства счетчиков

counter

counters

counter-reset

counter-increment

Media

Правило @media

Типы носителей

Импорт определенных носителей с использованием @import

Печать

Правило @page

Специфические свойства страницы

margin, margin-left, margin-right, margin-top, margin-bottom

Свойства разрыва страницы

page-break-before

page-break-after

page-break-inside

сироты

вдовы

Профиль CSS Mobile

Селекторы в профиле Mobile CSS 900 35

Свойства в профиле CSS Mobile

Знакомство с CSS в реальном мире

Таблицы с CSS

Основанный на стандартах HTML 4.

Границы

Цвет

Вечерние дела

Поддержка браузера

» Это не работает» слово предупреждения

трудности: частичная поддержка, поддержка ошибок, отсутствие поддержки

Нет поддержки

Частичная поддержка и поддержка ошибок

Отсутствующие функции

Неработающие функции

Дизайн для Интернета

Введение

Тот же старый новый носитель?

Управление веб-страницами

Почему это важно?

Способ

Шрифты

Макеты

Цвета

Путь

Проверка

Проверка HTML

Зачем проверять?

Что такое проверка?

Итак, как мне это сделать?

Онлайн-валидаторы

Автономные валидаторы

Проверка таблиц стилей

Полное руководство по позициям CSS: макет элементов в CSS

Главная/Блог/Учебники и руководства/Полное руководство по позициям CSS: расположение элементов в CSS

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

Свойство position в CSS определяет положение элемента в документе . Он определяет тип метода позиционирования для каждого элемента.

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

Мы узнаем:

Позиция CSS и свойства помощника
Позиция: статическая
Должность: родственник
Позиция: абсолютная
Позиция: фиксированная
Позиция: липкая
Z-индекс
Что узнать дальше

Узнайте, как создавать веб-сайты с нуля

Идеальное место, чтобы начать свое приключение. Этот путь учит всему, что вам нужно знать о HTML, CSS и JavaScript.

Станьте фронтенд-разработчиком

Позиция CSS и вспомогательные свойства

С помощью CSS мы определяем макет и дизайн веб-страницы. CSS позиция — это то, как мы позиционируем каждый элемент в документе. Это свойство представляет собой одно ключевое слово, и мы присваиваем ему значение, чтобы установить конкретную позицию элемента.

Существует пять основных значений для свойства position. Мы подробно определим их ниже:

статический
родственник
абсолютный
фиксированный
липкий

Сначала мы устанавливаем свойство position. Затем координаты элемента позиционируются с помощью вспомогательные свойства :

верх
дно
слева
справа
z-индекс

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

Веб-страница без позиции CSS или вспомогательных свойств

В приведенном выше коде мы видим, что у нас есть 3 разных изображения. Но в файле CSS мы не присвоили свойства положения ни одному элементу.

Изображения скорректированы по вертикальной линии , что является значением по умолчанию, когда свойство положения не назначено. Также есть небольшой запас сверху и слева. Это поле в 10 пикселей по умолчанию, предоставляемое HTML-элементом.

Как мы видим, не будет промежутков между элементами, если мы не обеспечим это извне. В файле CSS мы указали значение margin-bottom в 10 пикселей, что помогает нам сохранить зазор между изображениями.

Итак, зачем нам свойство position?

Без установки позиций правая часть веб-страницы теряется, и мы не можем организовать элементы . Свойство position позволяет нам использовать всю веб-страницу и организовать любой элемент так, как мы считаем нужным.

Теперь давайте углубимся в каждое из значений и вспомогательных свойств, которые мы можем использовать в нашем коде CSS.

Понравилась статья? Прокрутите вниз, чтобы подписаться на нашу бесплатную новостную рассылку, выходящую раз в два месяца.

Position: static

position:static — значение по умолчанию, предоставляемое HTML. Если мы не назначим элементам какое-либо свойство позиции, по умолчанию будет использоваться position:static , как в примере выше.

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

Давайте лучше разберемся на примере.

Использование position:static

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

Позиция: относительная

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

Элементы в любом документе располагаются в «нормальном положении», если мы не предоставляем ему какое-либо свойство положения. Используя position:relative , мы можем расположить элемент в соответствии с его обычным положением.

Важно! В отличие от static , мы можем перемещать элемент, используя вспомогательные свойства.

Давайте рассмотрим пример, чтобы лучше понять это.

Использование положения: относительно

В выходных данных мы ясно видим, что элементы перемещаются относительно их исходных положений на основе значений top , right , bottom и left .

Давайте посмотрим на другой пример. Здесь мы расположим элементы на горизонтальной линии, используя position:relative .

Использование position:relative для организации по горизонтальной линии

Здесь мы настраиваем все три изображения по горизонтальной линии. Для Astro_Girl , мы устанавливаем top:0px и left:0px , чтобы он оставался в исходном положении.

Для Astro_Cartoon необходимо установить top:-200px , чтобы вернуть его на первую строку. И чтобы отобразить его по горизонтальной линии, мы перемещаем его на 200px слева, используя left:200px . Но чтобы сохранить пространство 10px , мы переместим его на 210px слева.

Для Astro_Boy ставим top:-400px , чтобы вернуть его на первую строку. Мы используем ту же логику, чтобы удерживать его на горизонтальной линии. Чтобы сохранить пространство 10px , как и раньше, мы перемещаем его на 420px слева.

Позиция: абсолютная

Элемент, использующий позицию : абсолютная , позиционируется относительно ближайшего предка. Другими словами, элемент с position:absolute позиционируется относительно своего родительского элемента .

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

Примечание: Если мы не указываем свойства помощника, он автоматически позиционируется в начальную точку (верхний левый угол) своего родительского элемента.

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

Давайте лучше разберемся в этом на следующих примерах.

Использование position:absolute

В выводе мы видим только изображение Astro_Girl , так как этот элемент имеет свойство position:absolute . Он будет выброшен из нормального документооборота. Все остальные элементы будут вести себя так, как будто элемент не существует.

Astro_Boy использует position:static , поэтому он устанавливается в соответствии с обычным потоком документов. С Astro_Girl не является частью документооборота, наша веб-страница считает Astro_Boy первым элементом.

Он установлен в нормальное положение для первого элемента (верхний левый угол), но элемент Astro_Girl скроет его под собой, поэтому мы можем видеть только этот элемент.

Давайте узнаем, как открыть другой элемент с помощью вспомогательных свойств CSS.

Используя position:absolute со вспомогательными свойствами

Выше мы установили position:absolute для Astro_Girl как раньше. Но на этот раз мы устанавливаем вспомогательные свойства для Astro_Boy , используя left:400px . Это означает, что он будет отображаться на расстоянии 400 пикселей от верхнего левого угла.

На данный момент мы видим, что поле по умолчанию 10px , но мы можем удалить его, если захотим. В приведенном ниже примере мы удалили верхнее и левое поле 10px , установив top:-10px и left:-10px 9.0226 .

Примечание: Поскольку у наших элементов нет родительского элемента, он упорядочивается в соответствии с HTML.

Использование position:absolute без полей

Давайте рассмотрим еще один пример position: absolute , чтобы лучше понять его, на этот раз с использованием родительских элементов .

Использование position:absolute с родительским элементом

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

Для Astro_Girl мы устанавливаем position:absolute вместе со свойствами top:50px и left:100px . Он размещается относительно родительского элемента. То же самое и с Astro_Cartoon и Astro_Boy .

 
 Продолжайте учиться. 
 Изучите интерфейсную разработку, не просматривая видео или документацию. Текстовые схемы обучения Educative легко просматриваются и включают живую среду кодирования, что делает обучение быстрым и эффективным.
  Станьте фронтенд-разработчиком 
 
 Позиция: фиксированная 
 Элемент под позицией : фиксированная  также удаляется из обычного потока документов. Он расположен относительно окна просмотра   . Для этих значений используются свойства  верхнее  ,  правое  ,  нижнее  и  левое  .
 Есть два основных различия между  фиксированным  и  абсолютным :
 В  position:fixed  , все элементы размещаются относительно документа  , даже если у него есть родительский класс.
 На элементы не влияет прокрутка. Они остаются в своем точном положении, даже если мы прокручиваем страницу.
  Примечание:  Фиксированный элемент не оставит пробелов на странице.
 Использование position:fixed
 Здесь  Astro_Girl  и  Astro_Boy  имеют  top:50px  , но  Astro_Girl  устанавливается с  position:fixed  . Этот элемент размещается относительно элемента  .
  Astro_Boy  устанавливается с  position:absolute  , поэтому он размещается относительно своего родительского класса (оранжевый прямоугольник). Если мы прокрутим страницу,  Astro_Girl  и  Astro_Cartoon  останутся на экране.
 
 
 Позиция: липкая 
  позиция: липкая  можно объяснить как смесь  позиция: относительная  и  позиция: фиксированная  . При объявлении он действует как  position:relative  , но при прокрутке действует как  position:fixed  .
 Другими словами, элементы, установленные с  position:sticky , позиционируются в зависимости от позиции прокрутки пользователя.
 Липкий элемент переключается между относительным и фиксированным в зависимости от положения прокрутки. Оно является относительным до тех пор, пока в окне просмотра не встретится смещенная позиция.
 Давайте лучше разберемся на примере. Ниже обратите внимание на изменения положения при прокрутке окна вывода. Элемент с фиксированной позицией   останется в исходной позиции после прокрутки.
 Использование position:sticky
 Теперь у вас должно быть четкое представление о том, как значения CSS работают для позиционирования элементов. Прежде чем мы закончим, давайте лучше разберемся с  z-index , который полезен для создания дизайна веб-страницы.
 
 Z-index 
 При размещении наших элементов на веб-странице в некоторых случаях элементы  перекрываются с  . По умолчанию новый элемент будет отображаться сверху, что может испортить наш дизайн.
 Когда это произойдет, мы можем использовать  z-index , чтобы указать, какой элемент должен быть поверх других. Другими словами,  z-index  определяет порядок  стека  наших элементов. Это обычное дело для размещения текста над изображением.
 Элемент может иметь положительный или отрицательный порядок стека. Элемент с более высоким порядком стека появится перед элементом с более низким порядком стека.
  Примечание:   z-index  не работает с  position:static  .
 Давайте рассмотрим несколько примеров, чтобы лучше понять это. Во-первых, посмотрим, что произойдет, если мы не укажем значение  z-index .
 Без z-index
 В выводе мы видим, что элементы отображаются в порядке их появления, поэтому последний элемент будет сверху. Теперь давайте это исправим.
 В случае двух элементов можно указать  z-index:-1  для элемента, который мы хотим внизу.
 Использование z-index
 В выводе мы ясно видим, что элемент с  z-index:-1  расположен под первым элементом.
 Далее, давайте воспользуемся  z-index , чтобы расположить элементы так, как мы хотим. В этом примере мы увидим, что элементы с более низким z-индексом будут расположены ниже элемента с более высоким z-индексом.
 Использование z-index для организации элементов
 В выводе мы видим, что порядок расположения элементов изменен. Первый элемент находится сверху, а последний элемент — снизу. Мы расположили эти элементы, используя  z-индекс  значений.
 Наконец, давайте попробуем пример, где мы используем очень высокое число  z-index , чтобы гарантировать, что элемент всегда остается поверх других элементов.
 Использование высокого номера z-index
 Здесь элемент с z-index :999  остается поверх другого элемента с более низким значением z-index или значением z-index по умолчанию.
  Примечание:  Вы можете скачать все файлы из этого руководства на Google Диске или GitHub.
 
 Что узнать дальше 
 Поздравляем! Теперь вы знаете, как использовать позиции CSS для организации макета вашей веб-страницы. Это мощный инструмент, который является основой ваших знаний о внешнем интерфейсе. Но есть еще чему поучиться. Далее следует изучить:
  клип  свойство
  переполнение  свойство
  float  и  clear  свойства
 Горизонтальное и вертикальное выравнивание
 Комбинаторы CSS
 Чтобы помочь вам начать работу с пользовательским интерфейсом, Educative разработала упрощенную схему обучения под названием  «Стать фронтенд-разработчиком»  .