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

Рет қаралды 154,256

Күн бұрын

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

Пікірлер: 291

@annblok_webdev 5 жыл бұрын

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

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

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

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

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

@klimishin 3 жыл бұрын

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

@xeither289 2 жыл бұрын

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

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

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

@annblok_webdev 5 жыл бұрын

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

@alexpotap3985 5 жыл бұрын

Красавчик

@Radik7159 5 жыл бұрын

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

@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 4 жыл бұрын

Спасибо

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

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

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

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

@yurok1991 5 жыл бұрын

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

@WapSter92 5 жыл бұрын

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

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

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

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

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

@xeither289 2 жыл бұрын

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

@PuruKaw Жыл бұрын

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

@VasyaStone8oy 5 жыл бұрын

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

@bugaga8144 3 жыл бұрын

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

@zhldl Жыл бұрын

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

@ArthurYelkin 5 жыл бұрын

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

@kegarri5264 5 жыл бұрын

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

@sandusgoga9676 3 жыл бұрын

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

@alexanderzhidkikh7536 5 жыл бұрын

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

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

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

@matweyptushkin7697 4 жыл бұрын

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

@amadatentacion5586 3 жыл бұрын

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

@SergiiBespalko 4 жыл бұрын

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

@kannsky8812 3 жыл бұрын

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

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

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

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

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

@GOts_ZiLLA 4 жыл бұрын

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

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

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

@mahout2010 2 жыл бұрын

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

@mariiatkachova570 4 жыл бұрын

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

@annblok_webdev 4 жыл бұрын

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

@waytoit6220 3 жыл бұрын

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

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

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

@arinadruzhinina7685 4 жыл бұрын

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

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

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

@lefylok3685 5 жыл бұрын

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

@KuKu_RuKu88 4 жыл бұрын

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

@cvVerf 4 жыл бұрын

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

@never6891 5 жыл бұрын

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

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

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

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

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

@axelvermontov6607 5 жыл бұрын

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

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

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

@Kairatio 4 жыл бұрын

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

@Hgffhgtwa800 Жыл бұрын

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

@nefedov984 5 жыл бұрын

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

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

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

@Shagston_ 5 жыл бұрын

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

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

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

@Arefevpro Жыл бұрын

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

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

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

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

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

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

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

@sevketiskender3229 5 жыл бұрын

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

@memedaddyz 4 жыл бұрын

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

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

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

@dragon28022000 5 жыл бұрын

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

@rickerscream666 8 ай бұрын

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

@valeriymalishevskyi1723 5 жыл бұрын

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

@supkilerAOFF 5 жыл бұрын

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

@sosiskaHitlera 5 жыл бұрын

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

@romaibragimov9872 3 жыл бұрын

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

@annblok_webdev 3 жыл бұрын

Спасибо :)

@anvarturdaliev9834 5 жыл бұрын

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

@inotak Жыл бұрын

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

@samolevich Жыл бұрын

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

@angelinayusupova7403 4 жыл бұрын

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

@annblok_webdev 4 жыл бұрын

Спасибо 😊

@snd5543 5 жыл бұрын

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

@annblok_webdev 5 жыл бұрын

Спасибо 😊

@mozgoreshka3985 4 жыл бұрын

Супер! 👍

@bezdeln1k810 4 жыл бұрын

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

@NIkFreedomForce 3 жыл бұрын

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

@madarauchiha3277 5 жыл бұрын

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

@user-nm3pw6dw3g 4 жыл бұрын

Нарешті найшов пояснення, дякую

@catweb666 5 жыл бұрын

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

@chtotutunas432 2 жыл бұрын

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

@vladikfrolov1107 Жыл бұрын

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

@blueskies275 3 жыл бұрын

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

@chillouter3648 2 жыл бұрын

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

@xeither289 2 жыл бұрын

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

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

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

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

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

@supres 3 жыл бұрын

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

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

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

@rustammusapirov9844 Жыл бұрын

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

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

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

@Angelika-uj6cd 5 жыл бұрын

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

@WapSter92 5 жыл бұрын

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

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

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

@Angelika-uj6cd 5 жыл бұрын

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

@yaroslavzef7267 5 жыл бұрын

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

@sailorden6877 5 жыл бұрын

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

@VadimN88 5 ай бұрын

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

@variagc1232 3 жыл бұрын

Это класс!

@TrendingNumer1. Жыл бұрын

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

@volodymyrgachkovsky7256 5 жыл бұрын

Офигенно!

@bdserver 3 жыл бұрын

Классно!

@MrRogilar 4 жыл бұрын

Умничка!)

@adaplusweb6080 2 жыл бұрын

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

@yaroslavzef7267 5 жыл бұрын

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

@Vlad-em1bx 4 жыл бұрын

МощьНО!

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

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

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

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

@blvckmamba454 3 жыл бұрын

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

@tatyanblack1519 3 жыл бұрын

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

@rasulali4690 4 жыл бұрын

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

@annblok_webdev 4 жыл бұрын

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

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

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

@daurenbizhanov3726 5 жыл бұрын

Наконец то спасибо!

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

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

@annblok_webdev 3 жыл бұрын

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