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

  Переглядів 153,081

Анна Блок

Анна Блок

День тому

🔥 Скидка 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

КОМЕНТАРІ: 289
@annblok_webdev
@annblok_webdev 5 років тому
Если у вас остались вопросы по верстке или фронтенд разработке, то обязательно задавай их на сайте онлайн-консультации frontendhelp.me/ru
@user-gv8yz6kd7t
@user-gv8yz6kd7t 4 роки тому
Анна, ты умница, спасибо большое, мне впервые за кучу прочитанных туториалов, именно с твоего объяснения стало понятно, как правильно и в каких случаях юзать position!
@user-kr5oy7fx9l
@user-kr5oy7fx9l 3 роки тому
Большое тебе спасибо за видео.👍
@klimishin
@klimishin 3 роки тому
Спасибо, Вам! Очень доходчиво и профессионально!
@xeither289
@xeither289 2 роки тому
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦❤
@user-dp6yt7yc9l
@user-dp6yt7yc9l 5 років тому
static - элемент позиционируется относительно родителя и соседних элементов relative - элемент позиционируется как static но можно двигать его относительно своего положения absolute - элемент позиционируется относительно ближайшего родителя с relative, absolute, fixed и sticky fixed - элемент позиционируется относительно окна браузера sticky - элемент позиционируется как static но когда верхняя граница элемента будет находиться на расстоянии, указанном в параметре top, от верхней границы окна браузера, он останется в этом положении относительно окна до тех пор пока его нижняя граница не упрется в другой sticky элемент или конец родительского элемента inherit - берет значение от родителя
@annblok_webdev
@annblok_webdev 5 років тому
Точно, про последнее значение забыла сказать, но ваш коммент дополнил видео 👍🏻
@alexpotap3985
@alexpotap3985 5 років тому
Красавчик
@Radik7159
@Radik7159 5 років тому
вот этого я объяснения ждал)
@BearVodkaAndValenki
@BearVodkaAndValenki 5 років тому
static - позиционирование не задано, элемент располагается в стандартном потоке. relative - элемент позиционируется относительно своей верхней левой точки. absolute - элемент вырывается из потока и позиционируется относительно его ближайшего расположенного предка. А при заданных top, left, right или bottom - относительно пространства берущему начало от containing block у body и равному размеру viewport. Либо позиционируется относительно родителя с position отличным от static, если такой имеется. fixed - похож на absolute, но позиционируется сугубо относительно viewport. Либо относительно родителя с заданными свойством transform, perspective, will-change: transform, will-change: perspective, если такой имеется.
@aleksyantkiewicz4369
@aleksyantkiewicz4369 4 роки тому
Спасибо
@user-se8mj7lb6h
@user-se8mj7lb6h 5 років тому
Спасибо Вам за ваше желание давать знание не знающим , не останавливайтесь )
@PuruKaw
@PuruKaw Рік тому
Господи, вы так грамотно и понятно объясняете, спасибо.
@-web2378
@-web2378 5 років тому
в целом неплохо, но если б я был новичком, то на практике это мне б не помогло. при позиционировании лучше начинать с потока элементов, рассказать людям со static, потом absolute и тд. и да, не забывайте про то, что при relative элемент вылетает из потока, оставляя за собой пространство) рекомендую показывать наглядно в шаблоне сайта прям вот как там все это происходит. одно дело на параграфах, а другое в бою)))
@yurok1991
@yurok1991 5 років тому
При relative элемент не выпадает из потока, только если не начат им управлять при помощи top/right и прочее. А при absolute сразу слетает элемент, да.
@WapSter92
@WapSter92 5 років тому
Релетив не выводит элемент из потока. Манипулировать позицию родителя лучше при помощи трансформ, чтобы поток сохранился.
@-web2378
@-web2378 5 років тому
@@yurok1991 я просто не договорил обо всем. кто знал, тот понял о чем я) там же не только этот нюанс.. в позиционировании важны мелочи, а не просто поверхностная информация. ибо это одна из важнейших частей при изучении CSS
@-web2378
@-web2378 5 років тому
@@WapSter92 вы же поняли, о чем я имею ввиду?))) просто писать много со всеми деталями..
@xeither289
@xeither289 2 роки тому
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦🤗❤
@amadatentacion5586
@amadatentacion5586 3 роки тому
Таких грамотных и красивых наставников ещё не видела планета, подача просто супер без лишней академичности, однозначно подписываюсь и буду продолжать получать знания на вашем великолепном канале
@VasyaStone8oy
@VasyaStone8oy 5 років тому
По сути, все ясно. Остается только пробовать. Спасибо!
@kegarri5264
@kegarri5264 5 років тому
Шикарно! Это то чего мне не хватало) Спасибо))
@zhldl
@zhldl Рік тому
как же все ясно и понятно объяснила, спасибо дорогая живи долго
@sandusgoga9676
@sandusgoga9676 3 роки тому
Шикарно! Любим твои уроки!!!
@ArthurYelkin
@ArthurYelkin 5 років тому
Максимально понятно! Обожаю канал)
@bugaga8144
@bugaga8144 3 роки тому
Супер, понравилась краткость и конкретика, без долгих прилюдий
@mariiatkachova570
@mariiatkachova570 4 роки тому
Анна, я нашла твой канал и просто в восторге! Столько полезной информации, ты так просто и доступно все обьясняешь! Спасибо тебе огромное! Я уверена, через год у тебя будет 200к подписчиков)
@annblok_webdev
@annblok_webdev 4 роки тому
Mariia Tkachova спасибо, надеюсь 😄
@matweyptushkin7697
@matweyptushkin7697 4 роки тому
Очень хорошо всё объясняешь, все понятно с первого раза, спасибо!
@SergiiBespalko
@SergiiBespalko 4 роки тому
Четко мне по нраву. Особенно - краткость, уважаю, долго искал такие видео.
@alexanderzhidkikh7536
@alexanderzhidkikh7536 5 років тому
Супер. Спасибо за вашу работу. Есть вопросы еще, задам.
@---mg7gx
@---mg7gx 5 років тому
Молодец! Смотрю уроки, все объясняете четко и по делу. Смотрю как будто сам учюсь - отлтчные уроки!!! Дааайте Больше ситуаций по верстке!
@arinadruzhinina7685
@arinadruzhinina7685 4 роки тому
Спасибо за подробные объяснения! очень полезный материал)
@mahout2010
@mahout2010 2 роки тому
какая ты умничка) Все стало наконец-таки понятно! Спасибо
@user-qb5ro6zi3s
@user-qb5ro6zi3s 4 роки тому
Спасибо тебе большое! С недавних пор заинтересовался программированием и плавно перешел на верстку сайтов. Пока просто смотрю, как это все делается, как писать код и какие свойства CSS обеспечивают требуемое расположение блоков на сайте. При просмотре видео с версткой я не до конца понимал суть свойства position. Ты все очень здорово объяснила. Отдельное спасибо тебе за примеры. Посмотрю еще раз, и уже будет более понятно, почему в реальных примерах используются конкретные значения этого свойства. Лайк и подписка.
@user-cm1pn5qq9q
@user-cm1pn5qq9q 5 років тому
Как всегда, восхитительно..
@GOts_ZiLLA
@GOts_ZiLLA 3 роки тому
Стики, вообще полезняк! Единственная, кто вообще про него рассказала) Анна, спасибо!🤝
@Shagston_
@Shagston_ 5 років тому
Благодарствие 🤗
@user-mf7kt7mw7x
@user-mf7kt7mw7x 4 роки тому
Какая умничка. Приятно слушать
@lefylok3685
@lefylok3685 4 роки тому
Не, ну за такие видосы лайк и подписка сразу. Спасибо за разбор тонкостей 💙
@Anna-xe9wo
@Anna-xe9wo 5 років тому
Спасибо Вам за видео! Все очень подробно и понятно:)
@sevketiskender3229
@sevketiskender3229 5 років тому
Всё точно и понятно!!! Спасибо!
@user-sq3bt3lr9y
@user-sq3bt3lr9y 3 місяці тому
Долго не мог понять как работать с позицией, благодаря вам сразу все уяснил и все получилось! спасибо за краткость и информацию без воды!
@memedaddyz
@memedaddyz 4 роки тому
Огромное спасибо! Так просто, ясно и круто объяснила
@user-ov5tt6sc2f
@user-ov5tt6sc2f 2 роки тому
Спасибо большое за объяснение position: sticky! Мне это очень сильно нужно было
@user-ro2ll3wv6m
@user-ro2ll3wv6m 3 роки тому
Умница, все доступно и понятно! Благодарю!!!🎈🎈🎈
@user-ug6cp5bs9d
@user-ug6cp5bs9d 5 років тому
Просто слов нет, информация дана четко без воды и лишних слов, я по ходу не там учусь🙈 вот где надо было 👍 я еще совсем новичек, теперь буду знать🤪 спасибо вам!
@axelvermontov6607
@axelvermontov6607 4 роки тому
здарова) как успехи в освоении??
@never6891
@never6891 5 років тому
Очень удачный формат, спасибо! Было бы ещё полезно узнать где обычно используются те или иные свойства в практике.
@user-wz9qr6ki9v
@user-wz9qr6ki9v 3 роки тому
Спасибо голубоглазая!!!Благодаря твоему видео я понял позиционирование,а то я уже хотел разбить клавиатуру об стол и выкинуть монир в окно))))).Будим учится дальше...)лак естественно и подписка!нам новичкам очень сложно,много инфы не правильной в ютубе ,только вы наш спаситель!!!
@cvVerf
@cvVerf 4 роки тому
Очень общая информация, нехватает подробностей и "подводных" камней: про наложение, про особенности размеров элементов absolute и fixed и так далее
@dragon28022000
@dragon28022000 5 років тому
Спасибо за видео, всё ясно и понятно.
@kannsky8812
@kannsky8812 2 роки тому
с меня подписка, очень подробно, наверное даже самый подробный и понятный урок по position!
@KuKu_RuKu88
@KuKu_RuKu88 4 роки тому
Спасибо Вам. Только вы смогли донести полностью материал :))
@mario-fq9sf
@mario-fq9sf Рік тому
Спасибо! Очень информативно и понятно! Класс)
@valeriymalishevskyi1723
@valeriymalishevskyi1723 5 років тому
Спасибо за уроки!!! просто и понятно!!!
@user-gw2wi4io6g
@user-gw2wi4io6g 5 років тому
Все понятно и просто. спасибо :D
@s-m715
@s-m715 Рік тому
Молодец! Большое спасибо!) Четко, кратко, понятно!
@waytoit6220
@waytoit6220 3 роки тому
Всё просто и доступно, спасибо Вам, разъвеяли все мои недопонимания, по Position!))
@user-py7hm2mx7o
@user-py7hm2mx7o Рік тому
Спасибо, Анечка!🙂
@nefedov984
@nefedov984 5 років тому
Очень наглядно показано и информативно.
@Arefevpro
@Arefevpro Рік тому
Спасибо! Очень полезный контент )
@angelinayusupova7403
@angelinayusupova7403 4 роки тому
Благодарю за ясное объяснение!!)
@annblok_webdev
@annblok_webdev 4 роки тому
Спасибо 😊
@romaibragimov9872
@romaibragimov9872 3 роки тому
Спасибо большое! Очень полезная информация!)
@annblok_webdev
@annblok_webdev 3 роки тому
Спасибо :)
@supkilerAOFF
@supkilerAOFF 5 років тому
Понятно и Интересно смотреть !
@catweb666
@catweb666 5 років тому
Классные лекции, лайк
@user-gy4fc5mk9l
@user-gy4fc5mk9l 4 роки тому
Спасибо, очень помогла.
@bezdeln1k810
@bezdeln1k810 4 роки тому
просто и наглядно, лайк
@snd5543
@snd5543 5 років тому
Круто!) хоть и тема известна, подпишусь, хорошая подача материала😊👍🏻
@annblok_webdev
@annblok_webdev 5 років тому
Спасибо 😊
@blvckmamba454
@blvckmamba454 3 роки тому
Спасибо,обьяснила хорошо🔥
@user-xl4ji9jp6i
@user-xl4ji9jp6i 4 роки тому
Молодчинка !!! Коротко и ясно. (правда очень быстро) ))
@user-sc7qb4id1u
@user-sc7qb4id1u 8 місяців тому
спасибо ,очень хорошо все рассказала лайк
@rickerscream666
@rickerscream666 6 місяців тому
Спасибо тебе золотой человек ❤
@Kairatio
@Kairatio 4 роки тому
Анна блок, вы мне нравитесь, я просто готов слушать ваш голос пропуская информацию мимо ушей
@madarauchiha3277
@madarauchiha3277 5 років тому
Типичный Верстальщик спасибо!
@inotak
@inotak Рік тому
очень доходчиво. МОЛОДЕЦ!
@Hgffhgtwa800
@Hgffhgtwa800 Рік тому
Спасибо ты мне помог это понять, а то гуглил там все какое-то непонятное. Спасибо искренне 🙂
@user-hx2ec9cb3w
@user-hx2ec9cb3w Рік тому
Топовое видео. Все понятно
@anvarturdaliev9834
@anvarturdaliev9834 4 роки тому
то что я искал. умница
@user-fd5le5bx9j
@user-fd5le5bx9j 3 роки тому
ты крутая! Спасибо) люблю тебя))
@artemmolot2474
@artemmolot2474 3 роки тому
Спасибо вам, очень доходчиво объяснили) Подпишусь! + лайк)
@chillouter3648
@chillouter3648 2 роки тому
Вы молодец! У меня плохое зрение и для меня очень удобно когда большой шрифт! Спасибо!!!!
@xeither289
@xeither289 2 роки тому
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦
@adaplusweb6080
@adaplusweb6080 2 роки тому
Спасибо. Очень доходчиво.
@yaroslavzef7267
@yaroslavzef7267 4 роки тому
Спасибо, вкурил наконец то)
@tatyanblack1519
@tatyanblack1519 3 роки тому
спасибо, стало гораздо понятнее)
@ilyao.naumenko4831
@ilyao.naumenko4831 5 років тому
Воу воу норм. 1 ) Как раз эту тему сегодня читал. )
@chtotutunas432
@chtotutunas432 Рік тому
Класс, спасибо🤗
@user-kk5un9rv2z
@user-kk5un9rv2z 4 роки тому
спасибо , отлично объяснила
@user-tz4hw6te8k
@user-tz4hw6te8k 2 роки тому
Анна благодарю вас.
@user-yy5sl1sm1y
@user-yy5sl1sm1y 4 роки тому
this is amazing ) Thank you
@user-ws8be8gx9t
@user-ws8be8gx9t 5 років тому
Всё просто, понятно и по делу. Супер!!
@user-di5fy9gu6x
@user-di5fy9gu6x 4 роки тому
Спасибо, хоть кто то объяснил нормально) подписался
@sailorden6877
@sailorden6877 5 років тому
Ты прекрасна. Влюбился в тебя
@SIPIKEXE
@SIPIKEXE Рік тому
Молодец, искреннее Спасибо!👍
@annblok_webdev
@annblok_webdev Рік тому
❤️
@blueskies275
@blueskies275 3 роки тому
Круто, молодец!
@TrendingNumer1.
@TrendingNumer1. Рік тому
Очень помогло Благодарю
@rustammusapirov9844
@rustammusapirov9844 10 місяців тому
Крутышка какая, спасибо тебе
@user-nm3pw6dw3g
@user-nm3pw6dw3g 4 роки тому
Нарешті найшов пояснення, дякую
@danuiachimovschi7431
@danuiachimovschi7431 4 роки тому
очень информативное видео Я уже изучаю HTML и CSS, и мне нужно было много расположение элементов сайта лучший учебник лике
@volodymyrgachkovsky7256
@volodymyrgachkovsky7256 5 років тому
Офигенно!
@vladikfrolov1107
@vladikfrolov1107 Рік тому
Спасибо за информацию, вроде понял)) Прошел курсы по верстке, но все равно плавал в этом, благодарю
@rasulali4690
@rasulali4690 3 роки тому
Круто! Спасибо большое! Намного доступней, чем 40 статей прочитать)
@annblok_webdev
@annblok_webdev 3 роки тому
Спасибо, старалась 😊😊😊
@Nataly90mak
@Nataly90mak 4 роки тому
спасибо большое! мечтаю иметь такого наставника как Вы!)
@annblok_webdev
@annblok_webdev 4 роки тому
Это возможно 😊 У нас есть индивидуальный тариф в обучении
@daurenbizhanov3726
@daurenbizhanov3726 5 років тому
Наконец то спасибо!
@user-pb9cb9vg8s
@user-pb9cb9vg8s 5 років тому
Про position: sticky многие не слышали даже, на собеседование как то спросили виды позиционирований очень удивились про sticky, тогда я понял что я не в той компании прохожу собеседование)
@Angel-uj6cd
@Angel-uj6cd 5 років тому
вы вообще видели его поддержку?
@WapSter92
@WapSter92 5 років тому
А при чем тут компания? Набирают людей в большинстве случаев менеджеры, которым айтишники написали вопросы и ответы
@user-pb9cb9vg8s
@user-pb9cb9vg8s 5 років тому
Тимур Турсунбаев собеседовали ИТшники, hr’ы только ищут подходящую кандидатуру и приглашают на встречу)
@Angel-uj6cd
@Angel-uj6cd 5 років тому
​@@nikolaichkonstantin5041 раз вы знаете что такое caniuse, посмотрите поддержку гридов. И сравните. Об этом свойстве многие могут и не знать, потому что оно по сути бесполезное. Еще черновики прошерстите, и если очередная компания не будет в курсе какого-то из них - потешите свое ЧСВ ;-)
@yaroslavzef7267
@yaroslavzef7267 4 роки тому
@@Angel-uj6cd а ты пока в коментах его потешь)
@user-jq6tr6rr8v
@user-jq6tr6rr8v 5 років тому
Благодарочка !!!
@user-iw6tt5st7j
@user-iw6tt5st7j 3 місяці тому
Спасибо за видео!
@samolevich
@samolevich Рік тому
Супер! Спасибо
@supres
@supres 3 роки тому
Умная, красивая и очень красиво объяснить.
@user-gg8wg2st2w
@user-gg8wg2st2w 4 роки тому
Браво)!!!
@ynivermine7750
@ynivermine7750 5 років тому
круто спасибо большое )
@user-ib9rj4ir2c
@user-ib9rj4ir2c 3 роки тому
Анна вы даже не представляете как вы мне помогли, я тут голову ломал как закрепить навигационное меню в правую сторону страницы, теперь знаю как . спасибо вам большое.
@annblok_webdev
@annblok_webdev 3 роки тому
Рада, что видео оказалось полезным 🔥
@progerlife6690
@progerlife6690 4 роки тому
Прикольно...Отсталый от жизни походу. не знал что есть Sticky) Спасибо Аня!!
@mozgoreshka3985
@mozgoreshka3985 4 роки тому
Супер! 👍
@igorpetrushenko
@igorpetrushenko 5 років тому
Спасибо👍
@user-jv2tk6qx5c
@user-jv2tk6qx5c Рік тому
ясно и понятно спасибо
CSS Pseudo elements Before and After: Examples
11:55
Анна Блок
Переглядів 101 тис.
CSS units for font-size: px, %, em, rem, vw, vh, vmin, vmax
18:35
Анна Блок
Переглядів 68 тис.
Excited Dog Zooms In and Out of Sliding Door!
00:18
The Pet Collective
Переглядів 16 млн
Learn CSS Positioning Quickly With A Real World Example
8:32
Slaying The Dragon
Переглядів 550 тис.
TOP 20 typical errors in website layout
11:51
Анна Блок
Переглядів 92 тис.
CSS свойство display | Уроки HTML CSS
7:41
Pro Web
Переглядів 1,4 тис.
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Переглядів 216 тис.
CSS Position: как работает + реальный пример
8:16
Евгений Ращупкин
Переглядів 2,4 тис.
Позиционирование absolute и relative CSS
17:34
Александр Дудукало
Переглядів 4,1 тис.