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

Подписаться 24 тыс.

Просмотров 6 тыс.

50% 1

✏️ В этом занятии подробно поговорим про позиционирование, контекст наложения, свойство 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 | Что дальше
📚 Полезные ссылки:
➖ Современный справочник по CSS: doka.guide/css/
➖ Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox: developer.mozilla.org/ru/
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css

Опубликовано:

17 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@user-ge9gg4cp8d 2 месяца назад

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

@Sylar7773 9 месяцев назад

Спасибо огромное

@Ivanfwit 9 месяцев назад

было интересно посмотреть) спасибо!

@alexb.2616 7 месяцев назад

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

@myexcelentchannel 9 месяцев назад

Люблю ваши ролики, очень помогают.

@smotritelyoutube 9 месяцев назад

Пушка. Лайк, продолжай в том же духе

@hjetwd 9 месяцев назад

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

@AleksanderLamkov 9 месяцев назад

Спасибо за комментарий! Да, действительно, так оно и будет. Правда в реальной практике такое не приходилось использовать…

@hjetwd 9 месяцев назад

@@AleksanderLamkov пример из реальной практики - был слайдер, html код которого менять было нельзя (старый код) - каждый слайд содержал фоновую картинку через background-image + текст, менять можно было только css =))) задача - потушить яркость картинки, что бы текст был читаемым и наложить градиент в цвет сайта... соответственно у родительского блока с фоновой картинкой задавался isolation: isolate; добавлялся ::before c z-index: -1; что бы он подлез под текст и его не трогал + mix-bland-mod потушить яркость фоновой картинки + через background-image добавлялся градиент с эффектом устаревания через svg шум (noise grainy gradient css - вроде как называется, не помню уже) а текст сверх всего этого ужаса оставался девственно чистым белым... вот это был изврат, так изврат =)))

@user-dj8fg7qe9e 3 месяца назад

Спасибо, очень помог ваше урок!

@in-developing 4 месяца назад

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

@orman4021 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

Привет! Элемент box-3 в данном примере позиционируется относительно body. Если отключить top и left, то по умолчанию для этих свойств будут работать значения auto и фактически элемент останется на своем изначальном месте.

@orman4021 4 месяца назад

Я кажется понял идею. Он будет позиционироваться относительно родительского элемента с свойством relative, но если убрать у position: absolute значение top и left, как в примере, он просто будет занимать "визуально" свое место в потоке документа. Просто я думал, что position: absolute без указания top и left просто позиционирует его в левый-верхний угол всего документа

@andreigal4482 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

Это критика или похвала?)

@user-ks5jy6nn2m Месяц назад

@@AleksanderLamkov тоже в диссонансе error)))

@user-do3or8jr7v 3 месяца назад

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

@AleksanderLamkov 3 месяца назад

Иногда это описывается прямо в фигме в виде дополнительных поясняющих блоков, иногда дизайнеры оставляют комментарии прямо в макете, иногда поведение описывается в ТЗ, то есть в каком-то документе, а иногда знания передаются из уст в уста, в зависимости от серьезности проекта :)

@user-do3or8jr7v 3 месяца назад

@@AleksanderLamkov Подозреваю , что это слабое место - вызывающее разницу в трактовках. Спасибо

@user-ge9gg4cp8d 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

Если внутри relative позиционированного элемента внезапно всё содержимое становится absolute позиционированным, то этот relative элемент фактически становится равным по размерам 0х0 пикселей и поэтому ничего и не видно. Как вариант - добавить размеры этому элементы или же лучше вовсе не допускать таких ситуаций.

@This_is_hellwood 9 месяцев назад

Коли очікувати флекси?

@AleksanderLamkov 9 месяцев назад

Привет! Буквально в ближайшую неделю :)

@This_is_hellwood 9 месяцев назад

@@AleksanderLamkov чекаю з нетерпінням 🫡

@31danmaster31 9 месяцев назад

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

@AleksanderLamkov 9 месяцев назад

Пока не стоит на этом заострять внимание. Перед тем, как показывать эту систему с переменными, я предупредил, что эта информация для более опытных специалистов. Я обязательно расскажу о :root и CSS-переменных в одном из следующих видео. Но если кратко, то селектор :root {} То же самое, что и селектор html {} Просто селектор к корневому и самому главному элементу страницы. Там задают такие глобальные параметры, как CSS-переменные.