Этот курс продолжает обучение тех, кто уже познакомился с основами HTML и CSS. На очереди всякие изыски: отображение сложных элементов, изучение различий между браузерами и графика. В конечном итоге вы сможете сами сверстать страницу любой сложности. Авторы курса — разработчики из Яндекса.
Контекст наложения
Loading...
En provenance du cours de Moscow Institute of Physics and Technology
Тонкости верстки
63 notes
Moscow Institute of Physics and Technology
63 notes
Cours 3 sur 5 dans Specialization Разработка интерфейсов: вёрстка и JavaScript
À partir de la leçon
Модель отображения, часть 2
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное — от них зависит и система координат. На этой неделе вы познакомитесь со всеми типами и научитесь выбирать подходящий для ваших задач.
Rencontrer les enseignants
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
Здравствуйте!
В этом видео я расскажу вам о том,
по каким правилам происходят наложения элементов.
Итак, у нас элементы располагаются как по горизонтали, так и по вертикали.
Но также элементы могут накладываться друг на друга.
Это можно представить так, как будто бы они находятся вдоль оси Z.
Элементы, находясь в равных условиях, работают по следующему правилу:
то есть тот элемент, который находится ниже в коде, находится выше по оси Z.
Вот, например, мы взяли нижние элементы и сместили их вверх.
То есть получается, что зеленый бокс наползает на красный,
а синий наползает на зеленый и на красный.
Если посмотреть в перспективе, то видно, что box 2 выше,
чем box 1, и box 3 выше, чем box 2.
Задавать порядок наложения элементов помогает свойство z-index.
z-index принимает целое число.
z-index = 0 — это то же самое, что z-index = auto, которое установлено по умолчанию.
С одной стороны, кажется, всё просто: чем меньше значение z-index,
тем дальше от зрителя находится элемент.
Чем больше это значение, тем ближе к зрителю оно находится.
Но на самом деле не все так просто.
Перед тем как с этим разобраться,
нужно ознакомиться с понятием «контекст наложения».
Я всегда себе представляю контекст наложения как некоторую коробку,
и в этой коробке лежат элементы.
Коробки эти не могут пересекаться, то есть элементы,
находящиеся внутри этой коробки, не могут пересечься с элементами из другой коробки.
И эти элементы внутри этой коробки, то есть в контексте наложения,
перемещаются вместе с этим элементом.
То есть если элемент создает контекст наложения,
то элементы внутри этого контекста перемещаются только в этом пространстве.
Какие есть условия для создания контекста наложения?
Первое: если элемент является корневым,
то есть корневой элемент всегда создает контекст наложения.
Если элемент позиционирован не статически, и его значение z-index не равно auto.
И если прозрачность элемента менее единицы.
Хотел бы обратить ваше внимание на то, что нельзя расположить элементы из одного
контекста наложения между элементами другого контекста наложения.
Проводя аналогию с коробками, нельзя сделать так,
чтобы элемент из одной коробки пересекся с элементами из другой коробки,
потому что коробки закрыты и изолированы.
Итак, какой же существует порядок наложения?
В самом низу находится фон и border элемента — элемента,
который образует контекст наложения.
Выше него находятся позиционированные элементы и его дети с z-index < 0.
Еще выше находятся элементы блочного уровня в нормальном потоке,
то есть у которых position = static.
Выше идут плавающие элементы — о них я расскажу вам в следующем видео.
На пятом уровне идут inline-элементы.
На шестом уровне идут элементы с z-index = 0 или auto.
И также туда входят элементы со свойством opacity < 1.
И в самом верху находятся элементы и их потомки с z-index > 0.
Разберем пример.
У нас есть три бокса — красный, зеленый, синий.
В красном боксе текст red box.
В зеленом боксе текст green box, но с переносами.
И если мы посмотрим в перспективе, то увидим,
что зеленый находится выше красного, синий находится выше зеленого.
Но что же произошло с текстом?
Почему он находится выше всех?
Вернемся к порядку наложения, и мы увидим, что на пятом уровне
находятся inline-элементы, то есть они находятся выше, чем элементы блочного
уровня в нормальном потоке, которые находятся на третьем уровне.
То есть в данном случае получается,
что контекст наложения создает корневой элемент,
и все позиционируется относительно него, а текст является inline-уровнем.
Рассмотрим следующий пример.
У нас появился еще один блок с классом wrap,
и остались также красный блок, зеленый и синий.
Зададим красному блоку свойство position: relative.
По умолчанию у него установлено свойство z-index auto.
Посмотрим, что же у нас получилось.
Получается, что у нас красный блок будет выше зеленого и выше синего.
Почему так произошло?
Посмотрим на список, и мы увидим, что зеленый и синий блоки находятся на
третьем уровне, потому что это обычные блочные элементы в нормальном потоке.
Красный блок переместился на шестой уровень,
потому что он – позиционированный элемент с z-index = 0 или auto,
то есть у него установлен position: relative.
Следующий пример: верстка остается точно такая же,
то есть у нас элемент wrap, красный бокс, зеленый и синий.
Но красному боксу мы задаем прозрачность 0,99.
Что же у нас получается?
Точно такая же картина, то есть элемент красный становится выше всех.
Посмотрим на список, и мы увидим, что он попадает на шестой уровень,
то есть красный блок находится на шестом уровне, и позиционируется он там,
потому что у него opacity < 1.
А зеленый и синий остаются на третьем,
потому что это обычные блочные элементы в нормальном потоке.
Следующий пример.
Разметка остается точно такая же, но меняются стили.
Красному блоку мы задаем position: relative с z-index = 0,
а зеленому задаем position: relative с z-index = 1.
Что же у нас получается?
Если мы посмотрим в перспективе, то зеленый элемент становится выше всех.
Затем идет красный, а потом синий.
Посмотрим на порядок наложения и увидим, что на третьем уровне находится синий,
потому что это обычный блочный элемент в нормальном потоке, на шестом уровне –
позиционированный элемент с z-index = 0 или auto (в данном случае z-index = 0).
И на седьмом уровне выше всех – блок, у которого z-index > 0.
Следующий пример.
Итак, разметка у нас осталась неизменной, но поменялись немного стили.
Красному боксу мы задаем position relative и z-index = 0,
зеленому боксу мы задаем position relative и z-index = −1.
Посмотрим в браузере.
Итак, что мы видим?
Красный бокс у нас находится выше всех, затем идет синий, затем зеленый.
Если мы посмотрим на порядок наложения, мы увидим,
что на втором уровне находится зеленый бокс,
потому что у него z-index установлен < 0, и также есть свойство position: relative.
Синий бокс, так как у него не заданы никакие свойства,
это обычный блочный элемент в нормальном потоке.
И на шестом уровне выше всех находится позиционированный элемент с z-index = 0.
Еще один пример.
Разметка у нас остается неизменная, а в стилях есть некоторые изменения.
У элемента wrap мы задаем свойство opacity: 0,99.
Красному боксу задаем z-index: 999, и зеленому боксу мы задаем z-index: 0.
На первый взгляд кажется, что красный бокс должен быть выше всех.
Но посмотрим, что же получилось.
Итак, у нас есть три бокса, и если мы повернем в перспективе, то увидим,
что выше всех находится зеленый бокс.
Синий находится ниже всех.
То есть розовый бокс создает контекст наложения, то есть коробка появляется.
И все элементы, находящиеся внутри коробки, позиционируются относительно нее.
Так как красный и зеленый бокс находятся на одном уровне, то есть находятся
в равных условиях, то зеленый будет выше, потому что он находится в коде ниже.
Итак, посмотрим на схему.
На третьем уровне находится синий блок,
то есть элемент блочного уровня в нормальном потоке.
На шестом уровне находится позиционированный элемент с z-index = 0 и
opacity = 0,99, при том что красный блок создает еще и контекст наложения.
Рассмотрим еще один пример.
В этом случае мы поменяли немного разметку и оставили только три бокса — красный,
зеленый и синий.
У них следующие стили: у красного position: relative,
z-index: 999, у зеленого z-index: −999.
Так как они находятся все в одном контексте наложения,
то выглядеть это будет следующим образом: красный бокс находится выше всех,
ниже всех находится зеленый, и между ними находится синий.
Если посмотрим на схему, то увидим, что на втором уровне находится зеленый,
потому что у него z-index: −999, синий находится на третьем месте,
потому что обычный блочный.
И на седьмом уровне в самом верху находится элемент с z-index: 999.
Хочу обратить ваше внимание, что задавая z-index, вы не указываете расстояние
между элементами, вы просто указываете порядок вывода элементов сверху вниз.
То есть указываете, какой элемент должен быть выше или ниже.
Между ними нет никакого пространства, все примеры были для наглядности.
В веб-разработке существует такое понятие, как z-index hell, то есть когда на
странице присутствует огромное количество элементов с различными z-index: 1, 2...
Потом приходит другой разработчик, добавляет еще один элемент с z-index: 20
000, потом нужно перебить этот элемент, и становится неочевидным, где нужно добавить
элемент с каким z-index, чтобы поставить его ниже или выше какого-либо элемента.
Для этого существует группировка z-index,
то есть существуют диапазоны для свойства z-index, например,
от 1000 до 2000 — это шапка, от 3000 до 4000 — это попапы и так далее.
Устанавливая такие диапазоны, можно избежать путаницы с z-index.
В этом видео вы узнали, как создать контекст наложения и по каким правилам
накладываются элементы друг на друга.
В следующем видео я расскажу вам про плавающие элементы.
Explorer notre catalogue
Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.
Coursera propose un accès universel à la meilleure formation au monde,
en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.
© 2019 Coursera Inc. Tous droits réservés.
