10. CSS позиционирование — свойства position, top, right, bottom, left, z-index. Контекст наложения

✏️ Поговорим про позиционирование, контекст наложения, свойство position и всё, что с ним связано.

🔴 Timeline:
▶ 00:00​ | План урока
▶ 00:17​ | Свойство position
▶ 00:49 | Свойство position, все значения
▶ 01:05​ | Свойство position, значение static
▶ 01:30​ | Свойство position, значение relative
▶ 02:41​ | Свойство position, значение absolute
▶ 04:23​ | Элемент с position absolute внутри элемента с position static
▶ 04:57​ | Элемент с position absolute внутри элемента с position relative
▶ 05:15​ | Свойство position, значение fixed
▶ 06:15​ | Свойство position, значение sticky
▶ 07:00​ | Почему position sticky не работает
▶ 07:51​ | Свойства top, right, bottom, left
▶ 09:23​ | Нулевое значение смещения для всех сторон (top, right, bottom, left)
▶ 10:10​ | Свойство inset
▶ 10:41​ | Контекст наложения
▶ 11:26​ | Свойство z-index
▶ 13:10​ | Свойство z-index и вложенность
▶ 14:25​ | Плохие значения для z-index
▶ 14:48​ | Хорошие значения для z-index
▶ 15:15​ | Значения для z-index в :root-переменных
▶ 15:41​ | Что дальше

📚 Полезные ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:
📌 Автор:

#frontend #фронтенд #css

[geggcpd]

Очень круто обьясняешь, действительно я смотрел много туторов на ютубе но у тебя огромный талант (настолько доходчиво и без воды первый раз вижу). Рад что такие люди как ты существуют, мне есть кому ровнятся)

[LAMit]

Александр, вы молодец! Так коротко эту тему мало кто освещал. Твоим контентом удобно пользовать как справочником, если что-то подзабыл. Все грамотно структурировано. Таймлайн супер идея. Минимум времени, максимум пользы)👍

[hjetwd]

в css есть свойство Isolation со значением isolate - оно изолирует слой и правила z-index начинают работать по другому. К примеру можно изолировать слой, добавить к нему абсолютный ::before с высоким z-index, который будет перекрывать только фон родителя, но не его текст (обычно абсолютный ::before с высоким z-index перекрывает всё, как у Александра в примере 9:58)

[chessstructures]

Спасибо тебе Саша! Здоровья тебе и счастья!

[alexb.]

Одновременно и простая, и сложная тема. Спасибо за раскрытие. Особенно за рекомендации с z-идексом. Всё не мог понять - зачем там 500, если до этого есть числа :)

[in-developing]

Хороший курс как подсказка уже разбирающимся, но не с нуля.

[zvdchoj]

Будем ждать после курса js, курс по фреймворку react js, а так же гитхаб для начинающих 😉

[pvytlde]

Вот на данный момент как раз с вопросом позиционирования есть некоторые проблемы) Уже который день пытаюсь сделать верхнее меню для сайта, но что-то идёт не так) Надо эту тему подробнее изучить и попрактиковаться, чтобы уже точно понимать что и как работает.
Спасибо за урок!)

[andreigal]

Как из пулемета обожаю таких учителей, не понятно какую задачу перед собой ставят выпуская такое видео

[geggcpd]

Подскажи пожалуйста, допустим у родителя задний фон картинка и position: relative; а как только включаю его ребенку position: absolute; то задний фон картинки просто изчезает

[hyperpocket.]

Формула calc 15:37 точно правильная? Выйдет z-index: 250;, что является между menu и modal, а не tooltip и menu.

[orman]

Возник вопрос с разделом "Свойство position, значение absolute", 2:41. В этом примере box-3 позиционируется относительно body или box-2 с свойством relative? Почему при отключении свойств top и left box-3 прижимается не к левому-верхнему углу всей страницы, а сразу после box-2?

[ztnttuc]

планируешь ли делать курс react очень бы хотелось

[doorjrv]

Идёт ли обычно вместе с фигмой текстовое описание, например: хедер должен быть "липким", кнопка или ссылка, страница по ссылке должна открываться в новом оке и т.д.? описание ньюансов. Как обычно это делаеться?

[gabbergabberovich]

sticky так же не работает если у родительского элемента любой вложенности установлено overflow:hidden

[danmaster]

Про :root не понял, что с ним делать и как

[xncroep]

Очень длинное видео. Придумал усложненные, запутанные примеры