Анна, ты умница, спасибо большое, мне впервые за кучу прочитанных туториалов, именно с твоего объяснения стало понятно, как правильно и в каких случаях юзать 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 элемент вылетает из потока, оставляя за собой пространство) рекомендую показывать наглядно в шаблоне сайта прям вот как там все это происходит. одно дело на параграфах, а другое в бою)))
@@yurok1991 я просто не договорил обо всем. кто знал, тот понял о чем я) там же не только этот нюанс.. в позиционировании важны мелочи, а не просто поверхностная информация. ибо это одна из важнейших частей при изучении CSS
Просто слов нет, информация дана четко без воды и лишних слов, я по ходу не там учусь🙈 вот где надо было 👍 я еще совсем новичек, теперь буду знать🤪 спасибо вам!
Таких грамотных и красивых наставников ещё не видела планета, подача просто супер без лишней академичности, однозначно подписываюсь и буду продолжать получать знания на вашем великолепном канале
Анна, я нашла твой канал и просто в восторге! Столько полезной информации, ты так просто и доступно все обьясняешь! Спасибо тебе огромное! Я уверена, через год у тебя будет 200к подписчиков)
Спасибо голубоглазая!!!Благодаря твоему видео я понял позиционирование,а то я уже хотел разбить клавиатуру об стол и выкинуть монир в окно))))).Будим учится дальше...)лак естественно и подписка!нам новичкам очень сложно,много инфы не правильной в ютубе ,только вы наш спаситель!!!
Анна вы даже не представляете как вы мне помогли, я тут голову ломал как закрепить навигационное меню в правую сторону страницы, теперь знаю как . спасибо вам большое.
Анна, Вы, конечно, умница, что делаете уроки по веб-технологиям, но печально то, что в такой простой теме как позиционирование в CSS, у Вас допущено куча ошибок. При таком количестве «Большое спасибо, всё понятно!» в комментариях, мне страшно представить, сколько начинающих верстальщиков придут на собеседования и будут нести полную чушь. Советую тщательно изучать спецификацию по теме, перед тем как делать видео. А теперь об ошибках: 1)Утверждение, что вся белая область в окне браузера это тег body - в корне не верное, это даже не тег html - это область называется viewport (легко проверить, задав и html и body рамку и фиксированный размер и потом отцентрировать их margin:0 auto;) 2)При абсолютном и фиксированном позиционировании элемента и указании, например, top:0; left:0, если у всех предков стоит позиционирование по-умолчанию и отсутствуют специфические свойства* (дальше будет пояснение) - то элемент позиционируется не относительно тега body и даже не относительно html, а снова относительно всё того же viewport (области просмотра). 2)Для того, чтобы абсолютное и фиксированное позиционирование происходило относительно желаемого элемента среди предков, ему не обязательно задавать position: relative; Можно, например, указать следующие варианты (Это те самые специфические свойства): - filter: blur(0px); - will-change: transform; - transform: translate(0); Любое из этих свойств сделает тоже самое, что и position: relative; для нужного предка 3)Про sticky не буду писать, а то целый трактат получится, но там тоже есть над чем задуматься…
Спасибо мужик, про body и html я не знал. Могу я узнать где ты узнал про это. Viewport я так понимаю в потоке документа никак не найдешь да? Потому что относительное позиционирование со статичным позиционированием предков идет от абсолюта, и значит viwport должен содержать по умолчанию абсолютное позиционирование, или я ошибаюсь?
Про position: sticky многие не слышали даже, на собеседование как то спросили виды позиционирований очень удивились про sticky, тогда я понял что я не в той компании прохожу собеседование)
@@nikolaichkonstantin5041 раз вы знаете что такое caniuse, посмотрите поддержку гридов. И сравните. Об этом свойстве многие могут и не знать, потому что оно по сути бесполезное. Еще черновики прошерстите, и если очередная компания не будет в курсе какого-то из них - потешите свое ЧСВ ;-)
Inherit - элемент берет значение у родителя Absolute - позиционирование относительно элемента с заданным position Relative - позиционирование относительно родительского блока Sticky - поведение relative, выпадает из потока, когда касается границ блока по указанным правилам Static - поведение по умолчанию, блокируется top, left ... Fixed - позиционирование относительно viewport
Про sticky спасибо ,интересный вариант ,теперь буду использовать.Но хочу покритиковать объяснения относительно Relative+ Absolute, даже я зная что к чему и как это работает и применяю это постоянно , понимаю что тот кто только начинает и не понимает как это работает ,скорее всего не особо поймет что к чему.Дело в том что Static мы позиционируем при помощи Margin (внешние отступы) и Pading (внутренние ) и это нифига не Left,top и тд этот вопрос и это уточнение для новичка скорее всего должно быть прям решающим , я так считаю , а в видео об этом ни слова и не забываем что для позиционирования у нас есть Flexbox и Grid .И опять же таки, не стоит делать блоки относительно Body с позицией absolute лишь бы выставить их куда хочешь это не правильный путь, для этого складываем все в отдельный Div блок и позиционируем способом указанным выше.
Я лайк видео конечно поставлю, вполне хорошее объяснение, но для новичков скажу, тут практика решает. А ещё у absolute есть очень крутой фокус, дочерний элемент с absolute, позиционируется относительно родительского absolute, а не родителя с relative. Иногда очень полезно.
а если у родителя будет fixed? лол.. или взять вот блок, в нем есть текст, ему relative (блоку). в нем два блока после текста с position:absolute, причем заданы left и top, чтоб наезжали на текст, причем у этих блоков 2 разных цвета фона. что произойдет? а если захочется увидеть текст, то как поступить? или вот.. есть блок с absolute. если указывать left: 0, top: 2em, right: 0. что произойдет?)))))
еще одна задача.. допустим есть блок с классом container, в нем 3 блока с классом block. если установить position: absolute для container, а position: relative, float: right для block, то чего произойдет? если контейнеру сделать positon: relative? или fixed? тут не все так просто Тимур)))) хах. а если после этой всей кучи пойдет текст с border-top: 3px solid red... то при обтекании элементов как убрать ее в ненужных местах?) или фон какой нить. это уже из другой категории правда.. но вдруг знаете ответ)))
@@-web2378 что вы за бред написали. Я лишь сказал, что есть способ codepen.io/wapster92/pen/XGoqBa а как его применять это уже ваше личное дело. Хотите получить ответы на свои вопросы, изобразите это или сделайте пример кода, а какую-то хренатень из набора букв из какой-то другой задачи даже представлять не охота.
![[Full] 4 ต่อ 4 Celebrity EP.910 | 22 ก.ย. 67 | one31](http://i.ytimg.com/vi/4TR3MVpOiw8/mqdefault.jpg)
Если у вас остались вопросы по верстке или фронтенд разработке, то обязательно задавай их на сайте онлайн-консультации 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 вы же поняли, о чем я имею ввиду?))) просто писать много со всеми деталями..
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦🤗❤
Господи, вы так грамотно и понятно объясняете, спасибо.
Спасибо Вам за ваше желание давать знание не знающим , не останавливайтесь )
как же все ясно и понятно объяснила, спасибо дорогая живи долго
Долго не мог понять как работать с позицией, благодаря вам сразу все уяснил и все получилось! спасибо за краткость и информацию без воды!
Супер, понравилась краткость и конкретика, без долгих прилюдий
Просто слов нет, информация дана четко без воды и лишних слов, я по ходу не там учусь🙈 вот где надо было 👍 я еще совсем новичек, теперь буду знать🤪 спасибо вам!
здарова) как успехи в освоении??
Спасибо ты мне помог это понять, а то гуглил там все какое-то непонятное. Спасибо искренне 🙂
Таких грамотных и красивых наставников ещё не видела планета, подача просто супер без лишней академичности, однозначно подписываюсь и буду продолжать получать знания на вашем великолепном канале
Умная, красивая и очень красиво объяснить.
Анна блок, вы мне нравитесь, я просто готов слушать ваш голос пропуская информацию мимо ушей
Анна, я нашла твой канал и просто в восторге! Столько полезной информации, ты так просто и доступно все обьясняешь! Спасибо тебе огромное! Я уверена, через год у тебя будет 200к подписчиков)
Mariia Tkachova спасибо, надеюсь 😄
с меня подписка, очень подробно, наверное даже самый подробный и понятный урок по position!
Стики, вообще полезняк! Единственная, кто вообще про него рассказала) Анна, спасибо!🤝
Очень хорошо всё объясняешь, все понятно с первого раза, спасибо!
Спасибо большое за объяснение position: sticky! Мне это очень сильно нужно было
Спасибо голубоглазая!!!Благодаря твоему видео я понял позиционирование,а то я уже хотел разбить клавиатуру об стол и выкинуть монир в окно))))).Будим учится дальше...)лак естественно и подписка!нам новичкам очень сложно,много инфы не правильной в ютубе ,только вы наш спаситель!!!
Четко мне по нраву. Особенно - краткость, уважаю, долго искал такие видео.
Очень общая информация, нехватает подробностей и "подводных" камней: про наложение, про особенности размеров элементов absolute и fixed и так далее
Анна вы даже не представляете как вы мне помогли, я тут голову ломал как закрепить навигационное меню в правую сторону страницы, теперь знаю как . спасибо вам большое.
Рада, что видео оказалось полезным 🔥
какая ты умничка) Все стало наконец-таки понятно! Спасибо
Всё просто и доступно, спасибо Вам, разъвеяли все мои недопонимания, по Position!))
Молодец! Большое спасибо!) Четко, кратко, понятно!
Вы молодец! У меня плохое зрение и для меня очень удобно когда большой шрифт! Спасибо!!!!
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦
Молодец! Смотрю уроки, все объясняете четко и по делу. Смотрю как будто сам учюсь - отлтчные уроки!!! Дааайте Больше ситуаций по верстке!
Не, ну за такие видосы лайк и подписка сразу.
Спасибо за разбор тонкостей 💙
Топовое видео. Все понятно
Супер. Спасибо за вашу работу. Есть вопросы еще, задам.
Спасибо за информацию, вроде понял)) Прошел курсы по верстке, но все равно плавал в этом, благодарю
Умница, все доступно и понятно! Благодарю!!!🎈🎈🎈
Молодчинка !!! Коротко и ясно. (правда очень быстро) ))
Спасибо! Очень полезный контент )
Благодарствие 🤗
Спасибо, Анечка!🙂
Нарешті найшов пояснення, дякую
Максимально понятно! Обожаю канал)
Какая умничка. Приятно слушать
Спасибо большое! Очень полезная информация!)
Спасибо :)
Анна, Вы, конечно, умница, что делаете уроки по веб-технологиям, но печально то,
что в такой простой теме как позиционирование в CSS, у Вас допущено куча ошибок.
При таком количестве «Большое спасибо, всё понятно!» в комментариях, мне страшно представить, сколько начинающих верстальщиков придут на собеседования и будут нести полную чушь. Советую тщательно изучать спецификацию по теме, перед тем как делать видео.
А теперь об ошибках:
1)Утверждение, что вся белая область в окне браузера это тег body - в корне не верное, это даже не тег html - это область называется viewport (легко проверить, задав и html и body рамку и фиксированный размер и потом отцентрировать их margin:0 auto;)
2)При абсолютном и фиксированном позиционировании элемента и указании, например, top:0; left:0, если у всех предков стоит позиционирование по-умолчанию и отсутствуют специфические свойства* (дальше будет пояснение) - то элемент позиционируется не относительно тега body и даже не относительно html, а снова относительно всё того же viewport (области просмотра).
2)Для того, чтобы абсолютное и фиксированное позиционирование происходило относительно желаемого элемента среди предков, ему не обязательно задавать position: relative;
Можно, например, указать следующие варианты (Это те самые специфические свойства):
- filter: blur(0px);
- will-change: transform;
- transform: translate(0);
Любое из этих свойств сделает тоже самое, что и position: relative; для нужного предка
3)Про sticky не буду писать, а то целый трактат получится, но там тоже есть над чем задуматься…
Спасибо мужик, про body и html я не знал. Могу я узнать где ты узнал про это. Viewport я так понимаю в потоке документа никак не найдешь да?
Потому что относительное позиционирование со статичным позиционированием предков идет от абсолюта, и значит viwport должен содержать по умолчанию абсолютное позиционирование, или я ошибаюсь?
Про position: sticky многие не слышали даже, на собеседование как то спросили виды позиционирований очень удивились про sticky, тогда я понял что я не в той компании прохожу собеседование)
вы вообще видели его поддержку?
А при чем тут компания? Набирают людей в большинстве случаев менеджеры, которым айтишники написали вопросы и ответы
Тимур Турсунбаев собеседовали ИТшники, hr’ы только ищут подходящую кандидатуру и приглашают на встречу)
@@nikolaichkonstantin5041 раз вы знаете что такое caniuse, посмотрите поддержку гридов. И сравните. Об этом свойстве многие могут и не знать, потому что оно по сути бесполезное. Еще черновики прошерстите, и если очередная компания не будет в курсе какого-то из них - потешите свое ЧСВ ;-)
@@Angelika-uj6cd а ты пока в коментах его потешь)
Спасибо за видео!
Очень удачный формат, спасибо! Было бы ещё полезно узнать где обычно используются те или иные свойства в практике.
По сути, все ясно. Остается только пробовать. Спасибо!
Спасибо Вам. Только вы смогли донести полностью материал :))
очень доходчиво. МОЛОДЕЦ!
Спасибо! Очень информативно и понятно! Класс)
Круто! Спасибо большое! Намного доступней, чем 40 статей прочитать)
Спасибо, старалась 😊😊😊
Круто!) хоть и тема известна, подпишусь, хорошая подача материала😊👍🏻
Спасибо 😊
Крутышка какая, спасибо тебе
Благодарю за ясное объяснение!!)
Спасибо 😊
Спасибо за подробные объяснения! очень полезный материал)
очень информативное видео
Я уже изучаю HTML и CSS, и мне нужно было много
расположение элементов сайта
лучший учебник
лике
Типичный Верстальщик спасибо!
Очень наглядно показано и информативно.
ты крутая! Спасибо) люблю тебя))
Спасибо за уроки!!! просто и понятно!!!
Анна благодарю вас.
Молодец, искреннее Спасибо!👍
❤️
Максимально доступно в короткое время, сразу начинаешь понимать. Спасибо!
Спасибо огромное все ясно и понятно!
то что я искал. умница
спасибо ,очень хорошо все рассказала
лайк
Прикольно...Отсталый от жизни походу. не знал что есть Sticky) Спасибо Аня!!
За стики отдельный респект
Огромное спасибо! Так просто, ясно и круто объяснила
Супер! 👍
Воу воу норм. 1 ) Как раз эту тему сегодня читал. )
Ты прекрасна. Влюбился в тебя
Понятно и Интересно смотреть !
так много свойств, что все сразу и не выучить) пойду сразу на практике потренируюсь)
Всё точно и понятно!!! Спасибо!
просто и наглядно, лайк
Спасибо, хоть кто то объяснил нормально) подписался
Inherit - элемент берет значение у родителя
Absolute - позиционирование относительно элемента с заданным position
Relative - позиционирование относительно родительского блока
Sticky - поведение relative, выпадает из потока, когда касается границ блока по указанным правилам
Static - поведение по умолчанию, блокируется top, left ...
Fixed - позиционирование относительно viewport
спасибо большое! мечтаю иметь такого наставника как Вы!)
Это возможно 😊 У нас есть индивидуальный тариф в обучении
Круто, молодец!
Класс, спасибо🤗
Про sticky спасибо ,интересный вариант ,теперь буду использовать.Но хочу покритиковать объяснения относительно Relative+ Absolute, даже я зная что к чему и как это работает и применяю это постоянно , понимаю что тот кто только начинает и не понимает как это работает ,скорее всего не особо поймет что к чему.Дело в том что Static мы позиционируем при помощи Margin (внешние отступы) и Pading (внутренние ) и это нифига не Left,top и тд этот вопрос и это уточнение для новичка скорее всего должно быть прям решающим , я так считаю , а в видео об этом ни слова и не забываем что для позиционирования у нас есть Flexbox и Grid .И опять же таки, не стоит делать блоки относительно Body с позицией absolute лишь бы выставить их куда хочешь это не правильный путь, для этого складываем все в отдельный Div блок и позиционируем способом указанным выше.
Спасибо за видео, всё ясно и понятно.
МощьНО!
Классные лекции, лайк
Очень тебе спосибо
спасибо, стало гораздо понятнее)
Умничка!)
Кратко и понятно
Спасибо, очень помогла.
Спасибо. Очень доходчиво.
Очень помогло Благодарю
Классно!
ясно и понятно спасибо
спасибо , отлично объяснила
Умничка!
Я себе весь мозг вынес, а все оказалось просто!
Браво)!!!
Спасибо, вкурил наконец то)
Ну умничка ведь,продолжай в том же духе👍👍👍
Я лайк видео конечно поставлю, вполне хорошее объяснение, но для новичков скажу, тут практика решает. А ещё у absolute есть очень крутой фокус, дочерний элемент с absolute, позиционируется относительно родительского absolute, а не родителя с relative. Иногда очень полезно.
а если у родителя будет fixed? лол.. или взять вот блок, в нем есть текст, ему relative (блоку). в нем два блока после текста с position:absolute, причем заданы left и top, чтоб наезжали на текст, причем у этих блоков 2 разных цвета фона. что произойдет? а если захочется увидеть текст, то как поступить? или вот.. есть блок с absolute. если указывать left: 0, top: 2em, right: 0. что произойдет?)))))
еще одна задача.. допустим есть блок с классом container, в нем 3 блока с классом block. если установить position: absolute для container, а position: relative, float: right для block, то чего произойдет? если контейнеру сделать positon: relative? или fixed? тут не все так просто Тимур)))) хах. а если после этой всей кучи пойдет текст с border-top: 3px solid red... то при обтекании элементов как убрать ее в ненужных местах?) или фон какой нить. это уже из другой категории правда.. но вдруг знаете ответ)))
ух-ты. Не знал. Спасибо
@@-web2378 что вы за бред написали. Я лишь сказал, что есть способ codepen.io/wapster92/pen/XGoqBa
а как его применять это уже ваше личное дело. Хотите получить ответы на свои вопросы, изобразите это или сделайте пример кода, а какую-то хренатень из набора букв из какой-то другой задачи даже представлять не охота.
Спасибо,обьяснила хорошо🔥