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

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

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

[@tld_lokor]

Чувак ты легенда просто. Не кто лучше тебя не объясняет

[@andrey6552]

Если бы я посмотрел это видео прежде, чем делать свои первые проекты, я бы не потерял столько времени на проблемы с position: sticky :D Подача восхитительная, все понятно и просто 🔥

[@in-developing]

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

[@alexb.2616]

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

[@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 - вроде как называется, не помню уже) а текст сверх всего этого ужаса оставался девственно чистым белым... вот это был изврат, так изврат =)))

[@Sylar7773]

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

[@LAMit]

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

[@chessstructures2648]

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

[@yourbestquestion]

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

[@muspel810]

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

[@Ivanfwit]

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

[@smotritelyoutube]

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

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

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

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

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

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

Спасибо!

[@User_5576-o6n]

Я вот что заметил что во время position absolute картинки которые через тег img добавляю то что то идет не так но когда картинка вставлена div через background (url) то все как надо Странная вещь. Что скажешь? Посоветуешь что-то?🤔

[@AleksanderLamkov]

Приведи конкретный пример с кодом и напиши сюда, тебе помогут разобраться: t.me/friendlyFrontendChat

[@User_5576-o6n]

@@AleksanderLamkov большое спасибо 🙏

[@This_is_hellwood]

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

[@AleksanderLamkov]

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

[@This_is_hellwood]

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

[@denishaleckiy8303]

В видео, кажется есть ошибки: При смещении для position relative в % происходит просчет процентов не относительно самого относительно позиционированного элемента, а относительно нестатически позиционированного родителя. Я проверил и чатгпт в целом со мной согласен. И со смещениями для position fixed: оно происходит относительно vh и vw (окна браузера), а не родительнского элемента. Отсюда и растягивание на весь родительский элемент (9:30) не работает, а происходит для всего окна.

[@AleksanderLamkov]

Спасибо за комментарий! Сейчас нет возможности проверить на уровне кода, но про position fixed я все же сказал верно. «При фиксированном позиционировании элемента браузер уже не смотрит на то, где в иерархии HTML расположен элемент и не проверяет свойство позиционирования у его родительских элементов. Браузер сразу же возьмёт за основу рамки страницы в браузере.» И про таймкод 9:30 не понял. Там разве есть проблемы?

[@denishaleckiy8303]

​@@AleksanderLamkov 8:10 идет утверждение, что при указании % будет происходить смещение в % относительно родительского элемента для fixed, а по факту относительно vh и vw. Поэтому я и говорю, что на 9:23 ошибка (ошибся, не 9:30) и с fixed задание inset 0 работать так, как показано на видео, не будет. Без негатива, благодарен за серию уроков, но эти детали на практике ввелим меня в ступор на полтора часа, пока я все не перепроверил хд

[@AleksanderLamkov]

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

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

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

[@AleksanderLamkov]

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

[@hyperpocket.]

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

[@AleksanderLamkov]

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

[@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 просто позиционирует его в левый-верхний угол всего документа

[@dmitryvertoprakhov5469]

Найс

[@ВиталийДавыдов-э4г]

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

[@AleksanderLamkov]

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

[@ВиталийДавыдов-э4г]

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

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

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

[@AleksanderLamkov]

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

[@andreigal4482]

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

[@AleksanderLamkov]

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

[@ЮлианМосиевский-й7т]

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

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

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

[@gabbergabberovich]

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

[@31danmaster31]

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

[@AleksanderLamkov]

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

[@Ochenopasniy]

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