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

[@ПауверТзен]

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

[@LAMit]

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

[@chessstructures2648]

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

[@Sylar7773]

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

[@hjetwd]

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

[@AleksanderLamkov]

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

[@hjetwd]

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

[@alexb.2616]

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

[@yourbestquestion]

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

[@in-developing]

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

[@smotritelyoutube]

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

[@СергейКулаков-о1и]

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

[@Ivanfwit]

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

[@АлександрБекач]

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

[@РоманВолков-д9щ]

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

[@ВикторияНеменкова]

Спасибо!

[@БілоногОлександр]

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

[@AleksanderLamkov]

Пока не планирую. Сначала по JS курс нужно закончить. Все мои ближайшие планы только об этом.

[@hyperpocket.]

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

[@AleksanderLamkov]

Опечатался. Спасибо, что заметил! Для получения значения z-index между тултипом и меню, нужно в формуле calc использовать переменные layer-tooltip и layer-menu.

[@This_is_hellwood]

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

[@AleksanderLamkov]

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

[@This_is_hellwood]

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

[@andreigal4482]

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

[@AleksanderLamkov]

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

[@user-ks5jy6nn2m]

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

[@НурмухаматГыязитдинов-о4ь]

Тут тема понятнее чем в других,так что автор объясняет тему который выбрал что не понятно?

[@orman4021]

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

[@AleksanderLamkov]

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

[@orman4021]

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

[@user-do3or8jr7v]

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

[@AleksanderLamkov]

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

[@user-do3or8jr7v]

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

[@gabbergabberovich]

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

[@ПауверТзен]

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

[@AleksanderLamkov]

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

[@31danmaster31]

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

[@AleksanderLamkov]

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

[@ПрограммистБизнесменУченый]

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