KZhead

Позиционирование элементов: свойство position в CSS + разбор sticky

Анна Блок
2024 ж. 22 Мам.
153 352 Рет қаралды
Жүктеу

🔥 Скидка 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
🔵 ВК - vk.com/tpverstak
🔴 Обучение - frontendblok.com

Пікірлер

  • Если у вас остались вопросы по верстке или фронтенд разработке, то обязательно задавай их на сайте онлайн-консультации frontendhelp.me/ru

    @annblok_webdev@annblok_webdev5 жыл бұрын

    • Анна, ты умница, спасибо большое, мне впервые за кучу прочитанных туториалов, именно с твоего объяснения стало понятно, как правильно и в каких случаях юзать position!

      @user-gv8yz6kd7t@user-gv8yz6kd7t4 жыл бұрын

    • Большое тебе спасибо за видео.👍

      @user-kr5oy7fx9l@user-kr5oy7fx9l3 жыл бұрын

    • Спасибо, Вам! Очень доходчиво и профессионально!

      @klimishin@klimishin3 жыл бұрын

    • БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦❤

      @xeither289@xeither2892 жыл бұрын

  • static - элемент позиционируется относительно родителя и соседних элементов relative - элемент позиционируется как static но можно двигать его относительно своего положения absolute - элемент позиционируется относительно ближайшего родителя с relative, absolute, fixed и sticky fixed - элемент позиционируется относительно окна браузера sticky - элемент позиционируется как static но когда верхняя граница элемента будет находиться на расстоянии, указанном в параметре top, от верхней границы окна браузера, он останется в этом положении относительно окна до тех пор пока его нижняя граница не упрется в другой sticky элемент или конец родительского элемента inherit - берет значение от родителя

    @user-dp6yt7yc9l@user-dp6yt7yc9l5 жыл бұрын

    • Точно, про последнее значение забыла сказать, но ваш коммент дополнил видео 👍🏻

      @annblok_webdev@annblok_webdev5 жыл бұрын

    • Красавчик

      @alexpotap3985@alexpotap39855 жыл бұрын

    • вот этого я объяснения ждал)

      @Radik7159@Radik71595 жыл бұрын

    • static - позиционирование не задано, элемент располагается в стандартном потоке. relative - элемент позиционируется относительно своей верхней левой точки. absolute - элемент вырывается из потока и позиционируется относительно его ближайшего расположенного предка. А при заданных top, left, right или bottom - относительно пространства берущему начало от containing block у body и равному размеру viewport. Либо позиционируется относительно родителя с position отличным от static, если такой имеется. fixed - похож на absolute, но позиционируется сугубо относительно viewport. Либо относительно родителя с заданными свойством transform, perspective, will-change: transform, will-change: perspective, если такой имеется.

      @BearVodkaAndValenki@BearVodkaAndValenki5 жыл бұрын

    • Спасибо

      @aleksyantkiewicz4369@aleksyantkiewicz43694 жыл бұрын

  • Спасибо Вам за ваше желание давать знание не знающим , не останавливайтесь )

    @user-se8mj7lb6h@user-se8mj7lb6h5 жыл бұрын

  • Господи, вы так грамотно и понятно объясняете, спасибо.

    @PuruKaw@PuruKaw Жыл бұрын

  • Супер, понравилась краткость и конкретика, без долгих прилюдий

    @bugaga8144@bugaga81443 жыл бұрын

  • Супер. Спасибо за вашу работу. Есть вопросы еще, задам.

    @alexanderzhidkikh7536@alexanderzhidkikh75365 жыл бұрын

  • как же все ясно и понятно объяснила, спасибо дорогая живи долго

    @zhldl@zhldl Жыл бұрын

  • Молодец! Смотрю уроки, все объясняете четко и по делу. Смотрю как будто сам учюсь - отлтчные уроки!!! Дааайте Больше ситуаций по верстке!

    @---mg7gx@---mg7gx5 жыл бұрын

  • Какая умничка. Приятно слушать

    @user-mf7kt7mw7x@user-mf7kt7mw7x4 жыл бұрын

  • Очень хорошо всё объясняешь, все понятно с первого раза, спасибо!

    @matweyptushkin7697@matweyptushkin76974 жыл бұрын

  • Максимально понятно! Обожаю канал)

    @ArthurYelkin@ArthurYelkin5 жыл бұрын

  • Четко мне по нраву. Особенно - краткость, уважаю, долго искал такие видео.

    @SergiiBespalko@SergiiBespalko4 жыл бұрын

  • Спасибо за подробные объяснения! очень полезный материал)

    @arinadruzhinina7685@arinadruzhinina76854 жыл бұрын

  • Умница, все доступно и понятно! Благодарю!!!🎈🎈🎈

    @user-ro2ll3wv6m@user-ro2ll3wv6m3 жыл бұрын

  • Шикарно! Любим твои уроки!!!

    @sandusgoga9676@sandusgoga96763 жыл бұрын

  • Шикарно! Это то чего мне не хватало) Спасибо))

    @kegarri5264@kegarri52645 жыл бұрын

  • с меня подписка, очень подробно, наверное даже самый подробный и понятный урок по position!

    @kannsky8812@kannsky88123 жыл бұрын

  • По сути, все ясно. Остается только пробовать. Спасибо!

    @VasyaStone8oy@VasyaStone8oy5 жыл бұрын

  • Спасибо большое за объяснение position: sticky! Мне это очень сильно нужно было

    @user-ov5tt6sc2f@user-ov5tt6sc2f2 жыл бұрын

  • какая ты умничка) Все стало наконец-таки понятно! Спасибо

    @mahout2010@mahout20102 жыл бұрын

  • Очень удачный формат, спасибо! Было бы ещё полезно узнать где обычно используются те или иные свойства в практике.

    @never6891@never68915 жыл бұрын

  • Таких грамотных и красивых наставников ещё не видела планета, подача просто супер без лишней академичности, однозначно подписываюсь и буду продолжать получать знания на вашем великолепном канале

    @amadatentacion5586@amadatentacion55863 жыл бұрын

  • в целом неплохо, но если б я был новичком, то на практике это мне б не помогло. при позиционировании лучше начинать с потока элементов, рассказать людям со static, потом absolute и тд. и да, не забывайте про то, что при relative элемент вылетает из потока, оставляя за собой пространство) рекомендую показывать наглядно в шаблоне сайта прям вот как там все это происходит. одно дело на параграфах, а другое в бою)))

    @-web2378@-web23785 жыл бұрын

    • При relative элемент не выпадает из потока, только если не начат им управлять при помощи top/right и прочее. А при absolute сразу слетает элемент, да.

      @yurok1991@yurok19915 жыл бұрын

    • Релетив не выводит элемент из потока. Манипулировать позицию родителя лучше при помощи трансформ, чтобы поток сохранился.

      @WapSter92@WapSter925 жыл бұрын

    • @@yurok1991 я просто не договорил обо всем. кто знал, тот понял о чем я) там же не только этот нюанс.. в позиционировании важны мелочи, а не просто поверхностная информация. ибо это одна из важнейших частей при изучении CSS

      @-web2378@-web23785 жыл бұрын

    • @@WapSter92 вы же поняли, о чем я имею ввиду?))) просто писать много со всеми деталями..

      @-web2378@-web23785 жыл бұрын

    • БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦🤗❤

      @xeither289@xeither2892 жыл бұрын

  • Всё просто и доступно, спасибо Вам, разъвеяли все мои недопонимания, по Position!))

    @waytoit6220@waytoit62203 жыл бұрын

  • Спасибо Вам. Только вы смогли донести полностью материал :))

    @KuKu_RuKu88@KuKu_RuKu884 жыл бұрын

  • Долго не мог понять как работать с позицией, благодаря вам сразу все уяснил и все получилось! спасибо за краткость и информацию без воды!

    @user-sq3bt3lr9y@user-sq3bt3lr9y4 ай бұрын

  • Не, ну за такие видосы лайк и подписка сразу. Спасибо за разбор тонкостей 💙

    @lefylok3685@lefylok36854 жыл бұрын

  • Спасибо тебе большое! С недавних пор заинтересовался программированием и плавно перешел на верстку сайтов. Пока просто смотрю, как это все делается, как писать код и какие свойства CSS обеспечивают требуемое расположение блоков на сайте. При просмотре видео с версткой я не до конца понимал суть свойства position. Ты все очень здорово объяснила. Отдельное спасибо тебе за примеры. Посмотрю еще раз, и уже будет более понятно, почему в реальных примерах используются конкретные значения этого свойства. Лайк и подписка.

    @user-qb5ro6zi3s@user-qb5ro6zi3s4 жыл бұрын

  • Огромное спасибо! Так просто, ясно и круто объяснила

    @memedaddyz@memedaddyz4 жыл бұрын

  • Анна, я нашла твой канал и просто в восторге! Столько полезной информации, ты так просто и доступно все обьясняешь! Спасибо тебе огромное! Я уверена, через год у тебя будет 200к подписчиков)

    @mariiatkachova570@mariiatkachova5704 жыл бұрын

    • Mariia Tkachova спасибо, надеюсь 😄

      @annblok_webdev@annblok_webdev4 жыл бұрын

  • Молодец! Большое спасибо!) Четко, кратко, понятно!

    @s-m715@s-m715 Жыл бұрын

  • Очень общая информация, нехватает подробностей и "подводных" камней: про наложение, про особенности размеров элементов absolute и fixed и так далее

    @cvVerf@cvVerf4 жыл бұрын

  • Как всегда, восхитительно..

    @user-cm1pn5qq9q@user-cm1pn5qq9q5 жыл бұрын

  • Спасибо! Очень информативно и понятно! Класс)

    @mario-fq9sf@mario-fq9sf Жыл бұрын

  • Стики, вообще полезняк! Единственная, кто вообще про него рассказала) Анна, спасибо!🤝

    @GOts_ZiLLA@GOts_ZiLLA3 жыл бұрын

  • Спасибо Вам за видео! Все очень подробно и понятно:)

    @Anna-xe9wo@Anna-xe9wo5 жыл бұрын

  • Спасибо! Очень полезный контент )

    @Arefevpro@Arefevpro Жыл бұрын

  • Очень наглядно показано и информативно.

    @nefedov984@nefedov9845 жыл бұрын

  • Молодчинка !!! Коротко и ясно. (правда очень быстро) ))

    @user-xl4ji9jp6i@user-xl4ji9jp6i4 жыл бұрын

  • Спасибо ты мне помог это понять, а то гуглил там все какое-то непонятное. Спасибо искренне 🙂

    @Hgffhgtwa800@Hgffhgtwa800 Жыл бұрын

  • Спасибо за уроки!!! просто и понятно!!!

    @valeriymalishevskyi1723@valeriymalishevskyi17235 жыл бұрын

  • Благодарствие 🤗

    @Shagston_@Shagston_5 жыл бұрын

  • Всё точно и понятно!!! Спасибо!

    @sevketiskender3229@sevketiskender32295 жыл бұрын

  • Спасибо, Анечка!🙂

    @user-py7hm2mx7o@user-py7hm2mx7o Жыл бұрын

  • Спасибо за видео, всё ясно и понятно.

    @dragon28022000@dragon280220005 жыл бұрын

  • Просто слов нет, информация дана четко без воды и лишних слов, я по ходу не там учусь🙈 вот где надо было 👍 я еще совсем новичек, теперь буду знать🤪 спасибо вам!

    @user-ug6cp5bs9d@user-ug6cp5bs9d5 жыл бұрын

    • здарова) как успехи в освоении??

      @axelvermontov6607@axelvermontov66074 жыл бұрын

  • Анна блок, вы мне нравитесь, я просто готов слушать ваш голос пропуская информацию мимо ушей

    @Kairatio@Kairatio4 жыл бұрын

  • Спасибо большое! Очень полезная информация!)

    @romaibragimov9872@romaibragimov98723 жыл бұрын

    • Спасибо :)

      @annblok_webdev@annblok_webdev3 жыл бұрын

  • очень доходчиво. МОЛОДЕЦ!

    @inotak@inotak Жыл бұрын

  • Понятно и Интересно смотреть !

    @supkilerAOFF@supkilerAOFF5 жыл бұрын

  • Спасибо тебе золотой человек ❤

    @rickerscream666@rickerscream6667 ай бұрын

  • Спасибо голубоглазая!!!Благодаря твоему видео я понял позиционирование,а то я уже хотел разбить клавиатуру об стол и выкинуть монир в окно))))).Будим учится дальше...)лак естественно и подписка!нам новичкам очень сложно,много инфы не правильной в ютубе ,только вы наш спаситель!!!

    @user-wz9qr6ki9v@user-wz9qr6ki9v3 жыл бұрын

  • Умная, красивая и очень красиво объяснить.

    @supres@supres3 жыл бұрын

  • Благодарю за ясное объяснение!!)

    @angelinayusupova7403@angelinayusupova74034 жыл бұрын

    • Спасибо 😊

      @annblok_webdev@annblok_webdev4 жыл бұрын

  • Классные лекции, лайк

    @catweb666@catweb6665 жыл бұрын

  • Анна благодарю вас.

    @user-tz4hw6te8k@user-tz4hw6te8k2 жыл бұрын

  • Вы молодец! У меня плохое зрение и для меня очень удобно когда большой шрифт! Спасибо!!!!

    @chillouter3648@chillouter36482 жыл бұрын

    • БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦

      @xeither289@xeither2892 жыл бұрын

  • Спасибо, очень помогла.

    @user-gy4fc5mk9l@user-gy4fc5mk9l4 жыл бұрын

  • Все понятно и просто. спасибо :D

    @user-gw2wi4io6g@user-gw2wi4io6g5 жыл бұрын

  • Круто!) хоть и тема известна, подпишусь, хорошая подача материала😊👍🏻

    @snd5543@snd55435 жыл бұрын

    • Спасибо 😊

      @annblok_webdev@annblok_webdev5 жыл бұрын

  • Спасибо. Очень доходчиво.

    @adaplusweb6080@adaplusweb60802 жыл бұрын

  • Спасибо за информацию, вроде понял)) Прошел курсы по верстке, но все равно плавал в этом, благодарю

    @vladikfrolov1107@vladikfrolov1107 Жыл бұрын

  • ты крутая! Спасибо) люблю тебя))

    @user-fd5le5bx9j@user-fd5le5bx9j3 жыл бұрын

  • Анна вы даже не представляете как вы мне помогли, я тут голову ломал как закрепить навигационное меню в правую сторону страницы, теперь знаю как . спасибо вам большое.

    @user-ib9rj4ir2c@user-ib9rj4ir2c3 жыл бұрын

    • Рада, что видео оказалось полезным 🔥

      @annblok_webdev@annblok_webdev3 жыл бұрын

  • Топовое видео. Все понятно

    @user-hx2ec9cb3w@user-hx2ec9cb3w Жыл бұрын

  • спасибо ,очень хорошо все рассказала лайк

    @user-sc7qb4id1u@user-sc7qb4id1u8 ай бұрын

  • то что я искал. умница

    @anvarturdaliev9834@anvarturdaliev98344 жыл бұрын

  • Типичный Верстальщик спасибо!

    @madarauchiha3277@madarauchiha32775 жыл бұрын

  • Очень помогло Благодарю

    @TrendingNumer1.@TrendingNumer1. Жыл бұрын

  • Крутышка какая, спасибо тебе

    @rustammusapirov9844@rustammusapirov984411 ай бұрын

  • Спасибо вам, очень доходчиво объяснили) Подпишусь! + лайк)

    @artemmolot2474@artemmolot24744 жыл бұрын

  • Воу воу норм. 1 ) Как раз эту тему сегодня читал. )

    @ilyao.naumenko4831@ilyao.naumenko48315 жыл бұрын

  • просто и наглядно, лайк

    @bezdeln1k810@bezdeln1k8104 жыл бұрын

  • спасибо , отлично объяснила

    @user-kk5un9rv2z@user-kk5un9rv2z4 жыл бұрын

  • Ты прекрасна. Влюбился в тебя

    @sailorden6877@sailorden68775 жыл бұрын

  • Спасибо за видео!

    @user-iw6tt5st7j@user-iw6tt5st7j3 ай бұрын

  • Супер! Спасибо

    @samolevich@samolevich Жыл бұрын

  • Спасибо,обьяснила хорошо🔥

    @blvckmamba454@blvckmamba4543 жыл бұрын

  • Молодец, искреннее Спасибо!👍

    @SIPIKEXE@SIPIKEXE Жыл бұрын

    • ❤️

      @annblok_webdev@annblok_webdev Жыл бұрын

  • Прикольно...Отсталый от жизни походу. не знал что есть Sticky) Спасибо Аня!!

    @progerlife6690@progerlife66904 жыл бұрын

  • спасибо большое! мечтаю иметь такого наставника как Вы!)

    @Nataly90mak@Nataly90mak4 жыл бұрын

    • Это возможно 😊 У нас есть индивидуальный тариф в обучении

      @annblok_webdev@annblok_webdev4 жыл бұрын

  • Круто! Спасибо большое! Намного доступней, чем 40 статей прочитать)

    @rasulali4690@rasulali46903 жыл бұрын

    • Спасибо, старалась 😊😊😊

      @annblok_webdev@annblok_webdev3 жыл бұрын

  • Спасибо, хоть кто то объяснил нормально) подписался

    @user-di5fy9gu6x@user-di5fy9gu6x4 жыл бұрын

  • спасибо, стало гораздо понятнее)

    @tatyanblack1519@tatyanblack15193 жыл бұрын

  • Про position: sticky многие не слышали даже, на собеседование как то спросили виды позиционирований очень удивились про sticky, тогда я понял что я не в той компании прохожу собеседование)

    @user-pb9cb9vg8s@user-pb9cb9vg8s5 жыл бұрын

    • вы вообще видели его поддержку?

      @Angel-uj6cd@Angel-uj6cd5 жыл бұрын

    • А при чем тут компания? Набирают людей в большинстве случаев менеджеры, которым айтишники написали вопросы и ответы

      @WapSter92@WapSter925 жыл бұрын

    • Тимур Турсунбаев собеседовали ИТшники, hr’ы только ищут подходящую кандидатуру и приглашают на встречу)

      @user-pb9cb9vg8s@user-pb9cb9vg8s5 жыл бұрын

    • ​@@nikolaichkonstantin5041 раз вы знаете что такое caniuse, посмотрите поддержку гридов. И сравните. Об этом свойстве многие могут и не знать, потому что оно по сути бесполезное. Еще черновики прошерстите, и если очередная компания не будет в курсе какого-то из них - потешите свое ЧСВ ;-)

      @Angel-uj6cd@Angel-uj6cd5 жыл бұрын

    • @@Angel-uj6cd а ты пока в коментах его потешь)

      @yaroslavzef7267@yaroslavzef72674 жыл бұрын

  • Всё просто, понятно и по делу. Супер!!

    @user-ws8be8gx9t@user-ws8be8gx9t5 жыл бұрын

  • Круто, молодец!

    @blueskies275@blueskies2753 жыл бұрын

  • Класс, спасибо🤗

    @chtotutunas432@chtotutunas432 Жыл бұрын

  • Спасибо, вкурил наконец то)

    @yaroslavzef7267@yaroslavzef72674 жыл бұрын

  • this is amazing ) Thank you

    @user-yy5sl1sm1y@user-yy5sl1sm1y4 жыл бұрын

  • Благодарочка !!!

    @user-jq6tr6rr8v@user-jq6tr6rr8v5 жыл бұрын

  • Супер! 👍

    @mozgoreshka3985@mozgoreshka39854 жыл бұрын

  • Это класс!

    @variagc1232@variagc12323 жыл бұрын

  • очень информативное видео Я уже изучаю HTML и CSS, и мне нужно было много расположение элементов сайта лучший учебник лике

    @danuiachimovschi7431@danuiachimovschi74314 жыл бұрын

  • Классно!

    @bdserver@bdserver3 жыл бұрын

  • Спасибо👍

    @igorpetrushenko@igorpetrushenko5 жыл бұрын

  • Офигенно!

    @volodymyrgachkovsky7256@volodymyrgachkovsky72565 жыл бұрын

  • Было очень полезно

    @JaratMan@JaratMan5 жыл бұрын

  • Умничка!)

    @MrRogilar@MrRogilar4 жыл бұрын

  • Познавательно. Спс...

    @yarik83men51@yarik83men514 жыл бұрын
KZhead