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

Рет қаралды 19,389

Александр Ламков — Friendly Frontend

Күн бұрын

Пікірлер: 54

@ПауверТзен 10 ай бұрын

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

@in-developing 11 ай бұрын

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

@tld_lokor 3 ай бұрын

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

@andrey6552 3 ай бұрын

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

@LAMit 5 ай бұрын

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

@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, если до этого есть числа :)

@Powermove99 7 ай бұрын

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

@yourbestquestion Жыл бұрын

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

@Ivanfwit Жыл бұрын

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

@muspel810 11 ай бұрын

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

@Sylar7773 Жыл бұрын

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

@smotritelyoutube Жыл бұрын

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

@Tehnokrott 8 күн бұрын

Александр - красава!

@LEO-cu1fn Ай бұрын

Лучший 👌🙂‍↔️🔥 как всегда всё чётко обясьнил наконец я понял как использовать absolute а то раньше только relative и margin использовал 😅

@АлександрБекач 6 ай бұрын

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

@РоманВолков-д9щ 5 ай бұрын

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

@ВикторияНеменкова 7 ай бұрын

Спасибо!

@denishaleckiy8303 3 ай бұрын

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

@AleksanderLamkov 3 ай бұрын

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

@denishaleckiy8303 3 ай бұрын

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

@AleksanderLamkov 3 ай бұрын

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

@NeverTellMeThe0dds Ай бұрын

z-index: var(--layer-tooltip) ай да молодец, я новичек, но идея очень понравилась)

@andreigal4482 9 ай бұрын

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

@AleksanderLamkov 9 ай бұрын

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

@ЮлианМосиевский-й7т 9 ай бұрын

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

@НурмухаматГыязитдинов-о4ь 7 ай бұрын

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

@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 3 ай бұрын

Найс

@hyperpocket. 5 ай бұрын

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

@AleksanderLamkov 5 ай бұрын

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

@This_is_hellwood Жыл бұрын

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

@AleksanderLamkov Жыл бұрын

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

@This_is_hellwood Жыл бұрын

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

@Js__voL_06 3 ай бұрын

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

@AleksanderLamkov 3 ай бұрын

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

@Js__voL_06 3 ай бұрын

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

@ЭдуардМаксаков-е3к Ай бұрын

А можно свойства position и display давать одному блоку?

@AleksanderLamkov Ай бұрын

Да, конечно.

@ВиталийДавыдов-э4г 11 ай бұрын

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

@AleksanderLamkov 11 ай бұрын

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

@ВиталийДавыдов-э4г 11 ай бұрын

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

@БілоногОлександр 5 ай бұрын

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

@AleksanderLamkov 5 ай бұрын

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

@ПауверТзен 10 ай бұрын

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

@AleksanderLamkov 10 ай бұрын

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

@gabbergabberovich 6 ай бұрын

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

@31danmaster31 Жыл бұрын

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

@AleksanderLamkov Жыл бұрын

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