Позиционирование элементов: свойство position в CSS + разбор sticky
ฝัง
- เผยแพร่เมื่อ 19 มิ.ย. 2024
- 🔥 Скидка 10% на обучение по вёрстке и JavaScript. Заполни форму, чтобы ей воспользоваться: forms.gle/Q5uKoU9HCX3Tmg6g6
- Курс по верстке для новичков (на практике сделаем 2 сайта на чистом HTML и CSS)
frontendblok.com/courses/html...
- Курс для прокаченных в верстке (на практике сделаем 2 сайта на Webpack, HTML, SCSS)
frontendblok.com/courses/adva...
- Курс по JavaScript (практикуем то, что пригодится при выполнении работе с сайтами)
frontendblok.com/courses/java...
В этом видео мы разберем работу довольно популярного свойства при верстке сайтов: position. Разберем его значения на практике.
Absolute - codepen.io/anna_blok/pen/vPjmJV
Fixed - codepen.io/anna_blok/pen/JzvNLL
Static - codepen.io/anna_blok/pen/xBjdaW
Sticky - codepen.io/anna_blok/pen/zbjzYj
Таймкоды:
00:00 Вступление
00:37 Какие значения есть в position?
02:43 Поддержка
03:08 Начало примера
04:13 Рассмотрим absolute
05:20 Рассмотрим relative
06:55 Рассмотрим fixed
07:55 Рассмотрим static
08:50 Рассмотрим sticky
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com
Если у вас остались вопросы по верстке или фронтенд разработке, то обязательно задавай их на сайте онлайн-консультации frontendhelp.me/ru
Анна, ты умница, спасибо большое, мне впервые за кучу прочитанных туториалов, именно с твоего объяснения стало понятно, как правильно и в каких случаях юзать position!
Большое тебе спасибо за видео.👍
Спасибо, Вам! Очень доходчиво и профессионально!
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦❤
static - элемент позиционируется относительно родителя и соседних элементов
relative - элемент позиционируется как static но можно двигать его относительно своего положения
absolute - элемент позиционируется относительно ближайшего родителя с relative, absolute, fixed и sticky
fixed - элемент позиционируется относительно окна браузера
sticky - элемент позиционируется как static но когда верхняя граница элемента будет находиться на расстоянии, указанном в параметре top, от верхней границы окна браузера, он останется в этом положении относительно окна до тех пор пока его нижняя граница не упрется в другой sticky элемент или конец родительского элемента
inherit - берет значение от родителя
Точно, про последнее значение забыла сказать, но ваш коммент дополнил видео 👍🏻
Красавчик
вот этого я объяснения ждал)
static - позиционирование не задано, элемент располагается в стандартном потоке.
relative - элемент позиционируется относительно своей верхней левой точки.
absolute - элемент вырывается из потока и позиционируется относительно его ближайшего расположенного предка. А при заданных top, left, right или bottom - относительно пространства берущему начало от containing block у body и равному размеру viewport.
Либо позиционируется относительно родителя с position отличным от static, если такой имеется.
fixed - похож на absolute, но позиционируется сугубо относительно viewport. Либо относительно родителя с заданными свойством transform, perspective, will-change: transform, will-change: perspective, если такой имеется.
Спасибо
Спасибо Вам за ваше желание давать знание не знающим , не останавливайтесь )
Шикарно! Это то чего мне не хватало)
Спасибо))
Максимально понятно! Обожаю канал)
в целом неплохо, но если б я был новичком, то на практике это мне б не помогло. при позиционировании лучше начинать с потока элементов, рассказать людям со static, потом absolute и тд. и да, не забывайте про то, что при relative элемент вылетает из потока, оставляя за собой пространство) рекомендую показывать наглядно в шаблоне сайта прям вот как там все это происходит. одно дело на параграфах, а другое в бою)))
При relative элемент не выпадает из потока, только если не начат им управлять при помощи top/right и прочее. А при absolute сразу слетает элемент, да.
Релетив не выводит элемент из потока. Манипулировать позицию родителя лучше при помощи трансформ, чтобы поток сохранился.
@@yurok1991 я просто не договорил обо всем. кто знал, тот понял о чем я) там же не только этот нюанс.. в позиционировании важны мелочи, а не просто поверхностная информация. ибо это одна из важнейших частей при изучении CSS
@@WapSter92 вы же поняли, о чем я имею ввиду?))) просто писать много со всеми деталями..
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦🤗❤
как же все ясно и понятно объяснила, спасибо дорогая живи долго
Супер, понравилась краткость и конкретика, без долгих прилюдий
Спасибо тебе большое! С недавних пор заинтересовался программированием и плавно перешел на верстку сайтов. Пока просто смотрю, как это все делается, как писать код и какие свойства CSS обеспечивают требуемое расположение блоков на сайте. При просмотре видео с версткой я не до конца понимал суть свойства position. Ты все очень здорово объяснила. Отдельное спасибо тебе за примеры. Посмотрю еще раз, и уже будет более понятно, почему в реальных примерах используются конкретные значения этого свойства. Лайк и подписка.
Супер. Спасибо за вашу работу. Есть вопросы еще, задам.
По сути, все ясно. Остается только пробовать. Спасибо!
Шикарно! Любим твои уроки!!!
Четко мне по нраву. Особенно - краткость, уважаю, долго искал такие видео.
какая ты умничка) Все стало наконец-таки понятно! Спасибо
Очень хорошо всё объясняешь, все понятно с первого раза, спасибо!
Господи, вы так грамотно и понятно объясняете, спасибо.
Как всегда, восхитительно..
Спасибо за подробные объяснения! очень полезный материал)
Таких грамотных и красивых наставников ещё не видела планета, подача просто супер без лишней академичности, однозначно подписываюсь и буду продолжать получать знания на вашем великолепном канале
Спасибо большое за объяснение position: sticky! Мне это очень сильно нужно было
с меня подписка, очень подробно, наверное даже самый подробный и понятный урок по position!
Какая умничка. Приятно слушать
Умница, все доступно и понятно! Благодарю!!!🎈🎈🎈
Спасибо Вам за видео! Все очень подробно и понятно:)
Не, ну за такие видосы лайк и подписка сразу.
Спасибо за разбор тонкостей 💙
Стики, вообще полезняк! Единственная, кто вообще про него рассказала) Анна, спасибо!🤝
Анна, я нашла твой канал и просто в восторге! Столько полезной информации, ты так просто и доступно все обьясняешь! Спасибо тебе огромное! Я уверена, через год у тебя будет 200к подписчиков)
Mariia Tkachova спасибо, надеюсь 😄
Молодец! Смотрю уроки, все объясняете четко и по делу. Смотрю как будто сам учюсь - отлтчные уроки!!! Дааайте Больше ситуаций по верстке!
Всё просто и доступно, спасибо Вам, разъвеяли все мои недопонимания, по Position!))
Молодец! Большое спасибо!) Четко, кратко, понятно!
Спасибо! Очень полезный контент )
Огромное спасибо! Так просто, ясно и круто объяснила
Спасибо! Очень информативно и понятно! Класс)
Спасибо Вам. Только вы смогли донести полностью материал :))
Спасибо большое! Очень полезная информация!)
Спасибо :)
Очень удачный формат, спасибо! Было бы ещё полезно узнать где обычно используются те или иные свойства в практике.
Спасибо за видео, всё ясно и понятно.
Долго не мог понять как работать с позицией, благодаря вам сразу все уяснил и все получилось! спасибо за краткость и информацию без воды!
Молодчинка !!! Коротко и ясно. (правда очень быстро) ))
Спасибо, Анечка!🙂
Спасибо ты мне помог это понять, а то гуглил там все какое-то непонятное. Спасибо искренне 🙂
Очень наглядно показано и информативно.
Просто слов нет, информация дана четко без воды и лишних слов, я по ходу не там учусь🙈 вот где надо было 👍 я еще совсем новичек, теперь буду знать🤪 спасибо вам!
здарова) как успехи в освоении??
Всё точно и понятно!!! Спасибо!
Благодарю за ясное объяснение!!)
Спасибо 😊
Понятно и Интересно смотреть !
Топовое видео. Все понятно
Все понятно и просто. спасибо :D
Спасибо тебе золотой человек ❤
Всё просто, понятно и по делу. Супер!!
Спасибо голубоглазая!!!Благодаря твоему видео я понял позиционирование,а то я уже хотел разбить клавиатуру об стол и выкинуть монир в окно))))).Будим учится дальше...)лак естественно и подписка!нам новичкам очень сложно,много инфы не правильной в ютубе ,только вы наш спаситель!!!
Анна блок, вы мне нравитесь, я просто готов слушать ваш голос пропуская информацию мимо ушей
Благодарствие 🤗
Очень общая информация, нехватает подробностей и "подводных" камней: про наложение, про особенности размеров элементов absolute и fixed и так далее
Спасибо за уроки!!! просто и понятно!!!
то что я искал. умница
очень доходчиво. МОЛОДЕЦ!
ты крутая! Спасибо) люблю тебя))
Круто!) хоть и тема известна, подпишусь, хорошая подача материала😊👍🏻
Спасибо 😊
Классные лекции, лайк
Умная, красивая и очень красиво объяснить.
просто и наглядно, лайк
Вы молодец! У меня плохое зрение и для меня очень удобно когда большой шрифт! Спасибо!!!!
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦
Спасибо за информацию, вроде понял)) Прошел курсы по верстке, но все равно плавал в этом, благодарю
Воу воу норм. 1 ) Как раз эту тему сегодня читал. )
Нарешті найшов пояснення, дякую
спасибо ,очень хорошо все рассказала
лайк
Спасибо, очень помогла.
Спасибо. Очень доходчиво.
Супер! Спасибо
Крутышка какая, спасибо тебе
Класс, спасибо🤗
Спасибо, хоть кто то объяснил нормально) подписался
Спасибо огромное все ясно и понятно!
Спасибо,обьяснила хорошо🔥
Круто, молодец!
спасибо, стало гораздо понятнее)
Спасибо, вкурил наконец то)
Супер! 👍
Анна вы даже не представляете как вы мне помогли, я тут голову ломал как закрепить навигационное меню в правую сторону страницы, теперь знаю как . спасибо вам большое.
Рада, что видео оказалось полезным 🔥
Спасибо вам, очень доходчиво объяснили)
Подпишусь! + лайк)
Анна благодарю вас.
Спасибо за видео!
Молодец, искреннее Спасибо!👍
❤️
Очень помогло Благодарю
Офигенно!
Это класс!
Ты прекрасна. Влюбился в тебя
спасибо , отлично объяснила
Наконец то спасибо!
Типичный Верстальщик спасибо!
this is amazing ) Thank you
Круто! Спасибо большое! Намного доступней, чем 40 статей прочитать)
Спасибо, старалась 😊😊😊
Умничка!)
Классно!
очень информативное видео
Я уже изучаю HTML и CSS, и мне нужно было много
расположение элементов сайта
лучший учебник
лике
МощьНО!
спасибо большое! мечтаю иметь такого наставника как Вы!)
Это возможно 😊 У нас есть индивидуальный тариф в обучении
Прикольно...Отсталый от жизни походу. не знал что есть Sticky) Спасибо Аня!!
Было очень полезно