Анна, ты умница, спасибо большое, мне впервые за кучу прочитанных туториалов, именно с твоего объяснения стало понятно, как правильно и в каких случаях юзать 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
Анна вы даже не представляете как вы мне помогли, я тут голову ломал как закрепить навигационное меню в правую сторону страницы, теперь знаю как . спасибо вам большое.
Просто слов нет, информация дана четко без воды и лишних слов, я по ходу не там учусь🙈 вот где надо было 👍 я еще совсем новичек, теперь буду знать🤪 спасибо вам!
Спасибо тебе большое! С недавних пор заинтересовался программированием и плавно перешел на верстку сайтов. Пока просто смотрю, как это все делается, как писать код и какие свойства CSS обеспечивают требуемое расположение блоков на сайте. При просмотре видео с версткой я не до конца понимал суть свойства position. Ты все очень здорово объяснила. Отдельное спасибо тебе за примеры. Посмотрю еще раз, и уже будет более понятно, почему в реальных примерах используются конкретные значения этого свойства. Лайк и подписка.
Спасибо голубоглазая!!!Благодаря твоему видео я понял позиционирование,а то я уже хотел разбить клавиатуру об стол и выкинуть монир в окно))))).Будим учится дальше...)лак естественно и подписка!нам новичкам очень сложно,много инфы не правильной в ютубе ,только вы наш спаситель!!!
Таких грамотных и красивых наставников ещё не видела планета, подача просто супер без лишней академичности, однозначно подписываюсь и буду продолжать получать знания на вашем великолепном канале
Inherit - элемент берет значение у родителя Absolute - позиционирование относительно элемента с заданным position Relative - позиционирование относительно родительского блока Sticky - поведение relative, выпадает из потока, когда касается границ блока по указанным правилам Static - поведение по умолчанию, блокируется top, left ... Fixed - позиционирование относительно viewport
Про position: sticky многие не слышали даже, на собеседование как то спросили виды позиционирований очень удивились про sticky, тогда я понял что я не в той компании прохожу собеседование)
@@nikolaichkonstantin5041 раз вы знаете что такое caniuse, посмотрите поддержку гридов. И сравните. Об этом свойстве многие могут и не знать, потому что оно по сути бесполезное. Еще черновики прошерстите, и если очередная компания не будет в курсе какого-то из них - потешите свое ЧСВ ;-)
Анна, я нашла твой канал и просто в восторге! Столько полезной информации, ты так просто и доступно все обьясняешь! Спасибо тебе огромное! Я уверена, через год у тебя будет 200к подписчиков)
Про 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 а как его применять это уже ваше личное дело. Хотите получить ответы на свои вопросы, изобразите это или сделайте пример кода, а какую-то хренатень из набора букв из какой-то другой задачи даже представлять не охота.
Анна, Вы, конечно, умница, что делаете уроки по веб-технологиям, но печально то, что в такой простой теме как позиционирование в 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 должен содержать по умолчанию абсолютное позиционирование, или я ошибаюсь?
Если у вас остались вопросы по верстке или фронтенд разработке, то обязательно задавай их на сайте онлайн-консультации 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 вы же поняли, о чем я имею ввиду?))) просто писать много со всеми деталями..
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦🤗❤
Долго не мог понять как работать с позицией, благодаря вам сразу все уяснил и все получилось! спасибо за краткость и информацию без воды!
Господи, вы так грамотно и понятно объясняете, спасибо.
Анна вы даже не представляете как вы мне помогли, я тут голову ломал как закрепить навигационное меню в правую сторону страницы, теперь знаю как . спасибо вам большое.
Рада, что видео оказалось полезным 🔥
Анна блок, вы мне нравитесь, я просто готов слушать ваш голос пропуская информацию мимо ушей
как же все ясно и понятно объяснила, спасибо дорогая живи долго
Спасибо Вам за ваше желание давать знание не знающим , не останавливайтесь )
Супер, понравилась краткость и конкретика, без долгих прилюдий
Просто слов нет, информация дана четко без воды и лишних слов, я по ходу не там учусь🙈 вот где надо было 👍 я еще совсем новичек, теперь буду знать🤪 спасибо вам!
здарова) как успехи в освоении??
Очень общая информация, нехватает подробностей и "подводных" камней: про наложение, про особенности размеров элементов absolute и fixed и так далее
Умная, красивая и очень красиво объяснить.
Спасибо ты мне помог это понять, а то гуглил там все какое-то непонятное. Спасибо искренне 🙂
Молодец! Большое спасибо!) Четко, кратко, понятно!
Вы молодец! У меня плохое зрение и для меня очень удобно когда большой шрифт! Спасибо!!!!
БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦
Стики, вообще полезняк! Единственная, кто вообще про него рассказала) Анна, спасибо!🤝
Спасибо большое за объяснение position: sticky! Мне это очень сильно нужно было
Спасибо тебе большое! С недавних пор заинтересовался программированием и плавно перешел на верстку сайтов. Пока просто смотрю, как это все делается, как писать код и какие свойства CSS обеспечивают требуемое расположение блоков на сайте. При просмотре видео с версткой я не до конца понимал суть свойства position. Ты все очень здорово объяснила. Отдельное спасибо тебе за примеры. Посмотрю еще раз, и уже будет более понятно, почему в реальных примерах используются конкретные значения этого свойства. Лайк и подписка.
Очень хорошо всё объясняешь, все понятно с первого раза, спасибо!
Спасибо голубоглазая!!!Благодаря твоему видео я понял позиционирование,а то я уже хотел разбить клавиатуру об стол и выкинуть монир в окно))))).Будим учится дальше...)лак естественно и подписка!нам новичкам очень сложно,много инфы не правильной в ютубе ,только вы наш спаситель!!!
с меня подписка, очень подробно, наверное даже самый подробный и понятный урок по position!
Таких грамотных и красивых наставников ещё не видела планета, подача просто супер без лишней академичности, однозначно подписываюсь и буду продолжать получать знания на вашем великолепном канале
какая ты умничка) Все стало наконец-таки понятно! Спасибо
Супер. Спасибо за вашу работу. Есть вопросы еще, задам.
Четко мне по нраву. Особенно - краткость, уважаю, долго искал такие видео.
Спасибо за информацию, вроде понял)) Прошел курсы по верстке, но все равно плавал в этом, благодарю
Inherit - элемент берет значение у родителя
Absolute - позиционирование относительно элемента с заданным position
Relative - позиционирование относительно родительского блока
Sticky - поведение relative, выпадает из потока, когда касается границ блока по указанным правилам
Static - поведение по умолчанию, блокируется top, left ...
Fixed - позиционирование относительно viewport
Спасибо тебе золотой человек ❤
Молодчинка !!! Коротко и ясно. (правда очень быстро) ))
Про position: sticky многие не слышали даже, на собеседование как то спросили виды позиционирований очень удивились про sticky, тогда я понял что я не в той компании прохожу собеседование)
вы вообще видели его поддержку?
А при чем тут компания? Набирают людей в большинстве случаев менеджеры, которым айтишники написали вопросы и ответы
Тимур Турсунбаев собеседовали ИТшники, hr’ы только ищут подходящую кандидатуру и приглашают на встречу)
@@nikolaichkonstantin5041 раз вы знаете что такое caniuse, посмотрите поддержку гридов. И сравните. Об этом свойстве многие могут и не знать, потому что оно по сути бесполезное. Еще черновики прошерстите, и если очередная компания не будет в курсе какого-то из них - потешите свое ЧСВ ;-)
@@Angelika-uj6cd а ты пока в коментах его потешь)
Всё просто и доступно, спасибо Вам, разъвеяли все мои недопонимания, по Position!))
Не, ну за такие видосы лайк и подписка сразу.
Спасибо за разбор тонкостей 💙
Молодец! Смотрю уроки, все объясняете четко и по делу. Смотрю как будто сам учюсь - отлтчные уроки!!! Дааайте Больше ситуаций по верстке!
Умница, все доступно и понятно! Благодарю!!!🎈🎈🎈
Анна, я нашла твой канал и просто в восторге! Столько полезной информации, ты так просто и доступно все обьясняешь! Спасибо тебе огромное! Я уверена, через год у тебя будет 200к подписчиков)
Mariia Tkachova спасибо, надеюсь 😄
Какая умничка. Приятно слушать
очень доходчиво. МОЛОДЕЦ!
Нарешті найшов пояснення, дякую
Шикарно! Любим твои уроки!!!
Спасибо, Анечка!🙂
Топовое видео. Все понятно
Круто! Спасибо большое! Намного доступней, чем 40 статей прочитать)
Спасибо, старалась 😊😊😊
Спасибо большое! Очень полезная информация!)
Спасибо :)
Максимально понятно! Обожаю канал)
Благодарствие 🤗
Спасибо Вам. Только вы смогли донести полностью материал :))
Шикарно! Это то чего мне не хватало)
Спасибо))
Спасибо за подробные объяснения! очень полезный материал)
Лучше чем прочитать 10 статьей про position
По сути, все ясно. Остается только пробовать. Спасибо!
Круто!) хоть и тема известна, подпишусь, хорошая подача материала😊👍🏻
Спасибо 😊
Очень наглядно показано и информативно.
Очень удачный формат, спасибо! Было бы ещё полезно узнать где обычно используются те или иные свойства в практике.
Ты прекрасна. Влюбился в тебя
Благодарю за ясное объяснение!!)
Спасибо 😊
так много свойств, что все сразу и не выучить) пойду сразу на практике потренируюсь)
Спасибо за уроки!!! просто и понятно!!!
Про sticky спасибо ,интересный вариант ,теперь буду использовать.Но хочу покритиковать объяснения относительно Relative+ Absolute, даже я зная что к чему и как это работает и применяю это постоянно , понимаю что тот кто только начинает и не понимает как это работает ,скорее всего не особо поймет что к чему.Дело в том что Static мы позиционируем при помощи Margin (внешние отступы) и Pading (внутренние ) и это нифига не Left,top и тд этот вопрос и это уточнение для новичка скорее всего должно быть прям решающим , я так считаю , а в видео об этом ни слова и не забываем что для позиционирования у нас есть Flexbox и Grid .И опять же таки, не стоит делать блоки относительно Body с позицией absolute лишь бы выставить их куда хочешь это не правильный путь, для этого складываем все в отдельный Div блок и позиционируем способом указанным выше.
Спасибо за видео!
Типичный Верстальщик спасибо!
Прикольно...Отсталый от жизни походу. не знал что есть Sticky) Спасибо Аня!!
спасибо большое! мечтаю иметь такого наставника как Вы!)
Это возможно 😊 У нас есть индивидуальный тариф в обучении
Как всегда, восхитительно..
Анна благодарю вас.
очень информативное видео
Я уже изучаю HTML и CSS, и мне нужно было много
расположение элементов сайта
лучший учебник
лике
Спасибо, хоть кто то объяснил нормально) подписался
Огромное спасибо! Так просто, ясно и круто объяснила
то что я искал. умница
ты крутая! Спасибо) люблю тебя))
Молодец, искреннее Спасибо!👍
❤️
Крутышка какая, спасибо тебе
Спасибо Вам за видео! Все очень подробно и понятно:)
Я лайк видео конечно поставлю, вполне хорошее объяснение, но для новичков скажу, тут практика решает. А ещё у 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
а как его применять это уже ваше личное дело. Хотите получить ответы на свои вопросы, изобразите это или сделайте пример кода, а какую-то хренатень из набора букв из какой-то другой задачи даже представлять не охота.
Анна, Вы, конечно, умница, что делаете уроки по веб-технологиям, но печально то,
что в такой простой теме как позиционирование в 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 должен содержать по умолчанию абсолютное позиционирование, или я ошибаюсь?
За стики отдельный респект
Спасибо огромное все ясно и понятно!
спасибо ,очень хорошо все рассказала
лайк
Воу воу норм. 1 ) Как раз эту тему сегодня читал. )
спасибо, стало гораздо понятнее)
просто и наглядно, лайк
Понятно и Интересно смотреть !
Кратко и понятно
Круто, молодец!
Классные лекции, лайк
Спасибо. Очень доходчиво.
Очень помогло Благодарю
Супер! 👍
Супер! Спасибо
Спасибо за видео, всё ясно и понятно.
Я себе весь мозг вынес, а все оказалось просто!
Класс, спасибо🤗
Всё точно и понятно!!! Спасибо!
Максимально доступно в короткое время, сразу начинаешь понимать. Спасибо!
спасибо , отлично объяснила
Спасибо, вкурил наконец то)
Это класс!
с шариком внутри поля можно игру на JS сделать. // при наведении rand(); меняет позицию.
Спасибо, очень помогла.
Честно говоря, урок так себе, но спасибо, помогло разобраться.