CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12
ฝัง
- เผยแพร่เมื่อ 22 พ.ค. 2024
- CSS позиционирование (CSS position). Позиционирование CSS очень часто используется при верстке современных макетов и открывает для нас новые интересные возможности расположения элементов на странице.
Расскажу про CSS position простыми словами и покажу на примерах. Рассмотрим такие CSS свойства позиционирования как position, top, left, right, bottom и z-index. Познакомимся с position static, position relative, position absolute, position fixed и position sticky
Весь плейлист с БЕСПЛАТНЫМ курсом и уроками по HTML CSS JS верстке:
• БЕСПЛАТНЫЙ курс по вер...
Шпаргалка/методичка по CSS позиционированию:
fls.guru/cssposition.html
Чат помощи друг другу по верстке - t.me/flschat
Архив с файлами урока ищи в телеграм канале t.me/freelancer_lifestyle
Или качай по ссылке: fls.guru/files/tutorials/css_...
0:00 - Вступление
0:32 - Подготовка к уроку
3:56 - Position
3:56 - static
4:36 - relative
6:53 - свойство z-index со значением relative
8:53 - absolute
14:01 - свойство z-index со значением absolute
14:54 - fixed
16:43 - свойство z-index со значением fixed
17:08 - sticky
20:34 - Подводные камни использования absolute
23:56 - Примеры
28:43 - Методичка
28:53 - Напутствие
Спасибо Emil Chapchakchi
Instagram: / freelancer.lifestyle
Facebook: / freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle
-----------------------------------------------------------------------------------------------
Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов.
На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
-----------------------------------------------------------------------------------------------
«Фрилансер по жизни». Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #cssposition
![[UNCUT] ฝันรักห้วงนิทรา | EP.3 (1/4)](http://i.ytimg.com/vi/zVXAFD1OLZg/mqdefault.jpg)
Бесплатный курс по вёрстке у Жеки намного превосходит платные курсы.
Спасибо большое!
это правда. Потому что цель платных курсов - срубить бабла, а изначальная цель Жеки - научить людей. Это разные вещи. Отсюда и результат
@@shelove4212 все платные курсы говно? Все? Я респектую автору этого видео, тут без вопросов. Но как же меня бесят такие как ты, ищешь бесплатные курсы, бесплатные книги, чтобы научиться зарабатывать. А авторы должны это просто так делать? Посмотрю я на тебя, если чего то добьешься в верстке, что маловероятно, напиши пару книг, и не бери за это деньги, потрать годик своей жизни , просто так)))
@@shelove4212 знаешь в чем правда, если бы автор этого видео, выставлял платные курсы, ты бы и на него гнал)) хотя он действительно хорошо объясняет
@@yatsan_rikk Человек Жеке комплимент хотел сделать, а тебя это - "Но как же меня бесят такие как ты". Жека делает добро, его хвалят, ты кидаешься говном, ор выше гор=) Добра тебе, а к доктору все же сходи=)
эти слова можно перед сном проговаривать "обучайся,развивайся и помни - живи,а работай в свободное время")
лайк автоматом)
Верно! Спасибо! 👍
Как молитва перед сном)
Отличный слоган. Остается только воплотить его в жизнь. Не во всех сфера и не у каждого это получится(!
Точно, афірмація
Шёл 2023 год. А Твои уроки более чем актуальны!
Спасибо за труды и всего самого наилучшего!
как успехи?
@@kostya4182 познаю азы Реакта для трудоустройства и портфолио в целом. Благодарю, что поинтересовались)
Боже, сколько мучений с этим позиционированием было... Просто тьма статей, уроков, глав из книг и все просто непонятно и бесполезно. Я НАКОНЕЦ-ТО, БЛАГОДАРЯ ТВОЕМУ УРОКУ ПОНЯЛ ЧТО ЭТО И КАК ОНО РАБОТАЕТ!!!!!! Жень, сказать что я благодарен - это не сказать ничего!!! В очередной раз просто хочу поблагодарить за твою работу, за твой настрой, позитив и уровень подачи материала! Это просто великолепно!!!! И еще, сейчас окончательно устаканится ситуация с короновирусом и т.д. и я обязательно оформлю подписку на патреон :)
Я очень рад!
Уже 2022 год почти а ситуация с короновирусом та же...
@@DeliWyle ага
кажется ты тоже решил программирование с нуля начать по урокам жени
@@user-gi8ln8bf5d да, и?
@@DeliWyle на тот момент я думал как то списаться чтобы вместе было легче обучаться
Все смотрю и удивляюсь,я не встречал еще таких людей,Вы действительно лучшее,что я когда либо смотре на TH-cam!
Спасибо большое!
Спасибо что вырыгал говно в коменты!
@@user-gw4wl5ri8e Изыди отсель, frostbitten canal
@@FreelancerLifeStyle вопрос: сейчас, спустя 10 месяцев с момента выхода ролика, сейчас все нормально с поддержкой sticky в браузерах?
Как всегда все просто и понятно🤟
Спасибо Жека, так держать!
30% первой зарплаты в IT индустрии, я переведу этому замечательному учителю)
Спасибо большое!
Такое же желание есть )
ПОДДЕРЖИВАЮ! КАК ОСИЛЮ! Я ТОЖЕ ЗА*
Аналогично. Подача информации такого количества и качества не должна оставаться без монетизации.
Я думал я один думал поддерживать автора как будут деньги (тавтология).
Мне кажется это лучше онлайн школы! Плюс ты еще и бесплатно это все преподаешь. Еще и ДЗ даешь. Просто крутой чувак и крутой канал!
Жека , уроки огонь. Надеюсь и JS в наши головы запихаешь)
Конечно)
Ніхто ще так гарно не пояснював, як ви)
Ваша харизма дійсно вражає, Евгенію!
Привет, спасибо тебе за твой проект! Не бросай его)) Очень помогает мне и другим. Конечно много подобных блогов, но везде что-то не то. И обращение к тем кто смотрит - лайкайте видео!!!
Спасибо! Будет поддержка буду продолжать!
Ваши уроки до сих пор актуальны и познавательны. Вы очень качественно объясняете и очень приятно слушать. Спасибо большое!
Женя, ты лучший!
Прохожу платный курс по гос. программе "Основы Frontend разработки" и человек может мямлить целый час, но в итоге никаких знаний после урока не остается.
Каждый раз после основного урока на курсе сажусь смотреть твои видео. И за пол часа я понял больше, то что нам пытаются разжевать за два часа!!!
Платный курс на юдеми, тема позиционирование, на много меньше дал мне понять как работать с позиционированием, чем ваш урок! Большое вам благодарю!
Супер! Я рад!
Даа у меня тоже самое
Я занимаюсь на скилфактори, тоже самое тему позиционирование не сразу понимал пока не видел урок Жеки)))
Отдельно благодарю!!!
Устроился на работу?)
Господи! Як добре, що я знайшла ваш канал, Євгене! Дякую🙏
Є люди-професіонали, але вони не вміють викладати інформацію, і тому їх урокі безглузді і складні.
Ваші туторіали НАСТІЛЬКИ прості і методичні в розумінні, що я дивлюся ваші лекції кожен раз, коли англійською я просто вже не доганяю😂 дякую вам величезне. Слава Україні 💛💙
Ты просто лучший. Такое чувство, будто попал на платный курс совершенно бесплатно. Я бы оценил такой курс минимум в 5к рублей
Как-то даже неудобно, в коментах люди потратили много денег и сил, чтобы с этой темой разобраться, а я узнала о ней сразу из урока Жени и непонимания не возникло совсем. Спасибо вам, добрый человек
еще занимаешься, как успехи?)
Ещё одно подтверждение качества материала! Спасибо тебе, и с Днём Рождения "Фрилансер по жизни"!
Спасибо большое!
Потрясающая работа и монтаж! Большая благодарность вам за просвещение! :)
Спасибо стараюсь 😊👍🤘
Здоровья автору и его близким! Кучу денег и океан счастья! Ты делаешь людей умнее! Даже я 32 летний лоб понимаю всё, о чём ты рассказываешь. Это лучший блогер, программер, учитель, коуч и человек)!
У меня нет слов, одни эмоции. Самый топовый учитель !!!
Я рад!
За методичку и обнуляющий стиль отдельный лайк.
Родиииииительский блОк, начаааааало начАл... и в верстке твоей надежный причал...
Вы лучший
Спасибо за ваши уроки
Женя, как самый настоящий Прометей несет нам пламя знаний в безупречной верстке! Огромная благодарность тебе наш Учитель!
Жека,про весь твой канал можно сказать так : я искал медь,а нашел золото!Спасибо тебе!
Канал находка, помимо приобретенных курсов, посматриваю этот канал.
Исключительно в пояснительных целях огонь
Материал отличный!!!!! Кто смотрит - не забываем про лайки!
Спасибо! 👍
Умею верстать на flex. Уже сверстал пару качественных лендингов, но position не понемеал. Спасибо тебе, теперь все ясно как чистое небо. Определенно лайк.
Спасибо! 👍👍🤟
Смысл в позишн, когда есть флекс?
Каким-то магическим образом вдохновляет на позитив:
"Обучайся, развивайся и помни - живи, а работай в свободное время"
Жека, Спасибо за контент!!!!!
Учусь на платных, но озарение приходит на твоих!!! Жаль что пришлось платить, чтобы найти интерес к теме! Но рад, что интерес расширяет границы познания и кругозор!!! Рад что нашёл благодаря этому твой курс! Спасибо большое!
На улице 2022, в моей стране война и я лишился работы… Евгений, Вы лучший ! Благодаря Вашим роликам есть надежда полностью изменить свою жизнь и освоить новую профессию
А хочеш, щоб до тебе ще раз прийшли на захист узкоязычных? До Чечні ж двічі війною ходили.
Продовжуй в тому ж дусі сіяти "узкий мир", і насіння зійде і дасть ще плодів, якщо тобі їх досі замало.
@@OperatorCN Тебе хто з псіхушки випустив
@@OperatorCN О клоун нашёлся
А ты красава! Продолжай в том же духе! Надеюсь у тебя всё выйдет и у тебя выйдет изменить свою жизнь к лучшему
@@OperatorCN , а ты думаешь они пришли потому что тут есть русскоговорящие?Это всего один из надуманых предлогов для войны, были бы все украиноговорящие, абсолютно ничего бы не изменилось.
На твоих курсах намного больше полезной информации чем во всем русском ютубе по web разработке!! Красавец
Я бы мог сюда приплести, то что это тоже русс Ютуб и что получается что часть русс Ютуба занимает больше чем весь русс Ютуб, а это невозможно, но не буду, потому что ... просто так
На ютубе понятнее курса не видел. Надеюсь, твой труд хоть как-то оправдывается.
Искренне благодарен!
Это даже не благотворительность. Ты бесплатно делаешь то, чего другие не могут предложить за хорошие деньги. Ты просто ТОП.
Храни тебя Господь!) только после твоего видео я нормально разобрался в позиционировании элементов и как это все работает.
Всего тебе самого наилучшего
Супер! Я рад!
Женя я просто в восторге от твоих уроков !! Очень клёво и не СКУЧНО!!! Огромное спасибо за проделанную работу!
Пожалуйста! Я очень рад!
Проходжу ваш курс зараз, захотілось вам написати дякую за вашу зроблену роботу (хоч майже ніколи не пишу коментарі в соц. мережах) ! Це вартує великої подяки. Відчувається при перегляді що ви щиро готовий ділитися всіма своїми навичками досвідом та вміннями. І те що ви працюєте на якість, а не на швидкість або свою вигоду🔥
Спасибо за объяснения, изучила эту тему 2 недели назад, но ничего не поняла. Отложила ее и занималась другими темами, потом решила, что настало время к ней вернуться. В голове были термины и какие-то "знания", но они не были зафиксированы вообще. Очень повезло, что нашла ваш канал и теперь уже все понятно, по крайней мере в теории. Практика конечно всегда сложнее. Но теперь я хотя бы имею лучшее представление и не буду наугад ставить элементы. Как же хорошо что есть ютуб и замечательные люди, которые делятся своими знаниями
Лучшего объяснения нельзя и представить. Вы такой молодец!!!!
Очень доходчиво изложено про поток и как различные типы позиционирования в нем себя ведут! Женя, большое спасибо! Идея с методичкой очень крутая, я все это в свое время рисовал в блокноте) Контент крутяк!
Спасибо большое! Двигаемся дальше!
С Вами такая сложная тема становится понятней!
Это первое вразумительное и понятное объяснение про z-index, left, right, top и bottom, из всех мной просмотренных! Огромное спасибо!
Пожалуйста!
Урок классный! свойство - sticky прикольное, новое для меня))
Спасибо! 👍
Женя максимально точно уловил, то что нужно для начинающих верстальщиков! Годный контент! 👍
Так легко и доступно объясняете материал, спасибо Вам огромное!!!
Спасибо за то что вы для нас делаете!!!Уроки ОГОНЬ!!!!!
С меня лайк за работу и метадичку,но я очень ждал домашнее задание.
Спасибо! Не всегда успеваю делать еще и макет(
А что тут домашнего задавать? Сделай себе 4-5 блока и играйся с ними с помощью позиционирования, пока до автоматизма не доведешь все полученное в уроке ;)
Опять все ясно,четко как и в предыдущих уроках.Ничего подобного не встречал.Информации много, надо время что бы уложилась, но подача материала просто ЗАМЕЧАТЕЛЬНАЯ!
Спасибо!
Дуже дякую за урок. Неймовірно корисна інформація. Вчимося далі!
Чувак, ты лучший в мире учитель. Я зашел глянуть ответ на 1 вопрос, а ты ответил минимум на 4 ) Спасибо
За методичку готов еще несколько лайков поставить, жаль, ютуб не позволяет :D Урок как всегда на высшем уровне! Все доходчиво и главное, понятно (удивительно)! :D Спасибо, Женя!
Спасибо, стараюсь))
даже не верится, что о сложном можно так просто! У вас лучшие уроки, спасибо :))
Я рад! Пожалуйста!
Речь для концовки просто бомба 👍
Спасибо!
Как же круто ты рассказываешь ,у меня не очень получается запоминать ,но очень нравится как ты доносишь материал ....Смотрю каждый урок раз по пять Компьютер появился поздно ,в 24 года ,оченнь плохо с ним был знаком ,потом семья дети ,и какие-то не до этого было ...Сейчас уже 35 лет ,но очень нравится эта тема ,надеюсь получается зарабатывать в этом направлении...
Спасибо за отличнейший ликбез по позиционированию. Теперь все разложено по полочкам. И все, как всегда, стало понятно. Приятно упорядочить в информационном хаосе хоть небольшую часть материала. Рэспэкт Вам, Евгений и лайк за достойный контент!!
Большое спасибо за уроки и за видео о правилах учебы в этой сфере. Применяю все советы. Желаю Вам всего самого наилучшего!
Спасибо! Рад что нравится
Катерина, как обстоят дела через 9 месяцев? уже работаете или еще учитесь?
@@Ananasovna94 здравствуйте, ввиду того, что на мне двое малышей, немного затянулась учёба, но продолжаю не смотря ни на что! Учусь в школе rs school, задания выполняю, очень помогают видео Евгения!
Благодарю вас за отличный урок, вы прекрасно объясняете, отличные аналогии и примеры приводите!
Очень интересная тема и она отлично подана Вами! Спасибо за труды!
Вас приятно слушать и на вас приятно смотреть. Спасибо за наиполезнейший урок!
Спасибо большое! Я очень рад что полезно!
Друг, спасибо тебе большое за изложение такого ценного материала! Твоя подача и комплексный подход к делу поражают! Намного лучше платных курсов. Благодарите автора донатами, за такие вещи это делать нужно! И ты развивайся! Успехов тебе!
Урок отличный, всё четко разложено по полкам, Большое спасибо!
Спасибо за отличные уроки!!!!!Очень легко усваивается материал
Евгений, спасибо Вам за работу! Вы вселяете надежду в мои собственные силы!
Я рад!
Я, честно не понимаю, почему такой маленький процент лайков по отношению к просмотрам???? Блин, да это реально лучшие уроки для новичков из тех , что я видел в ру сегменте. Всякие там html-academy и рядом не стояли, по уровню подачи материала!
Спасибо! Я рад!
Спасибо за урок! Храни Вас Бог!
Лучший курс который можно вообще найти, даже платные рядом не стоят.
Буду донатить как только найду работу!
Спасибо!
Все по делу, сжато, четко, понятно. Замечательное видео, большое спасибо.
Пожалуйста
Как всегда, все доступно и толково! Спасибо!!!
Пожалуйста!
Очень легко и доступно объяснил. После просмотра не осталось вопросов. Теперь бегу практиковаться
Спасибо огромное !Ни выразить словом ни кодом описать на сколько этот канал хорош
Есть куча каналов с похожим контентом, но всегда есть чувство, что чего-то не хватает. На твоём канале всё прекрасно. Спасибо 👍
Спасибо!
Подписался на ваш канал и теперь смотрю каждый день. Спасибо что вы делитесь своими навыками.
Хочу также добавить что я смотрю платные курсы по вёрстке и материал подачи у вас лучше , очень доходчиво объясняете, складывается впечатление что вы действительно занимайтесь любимым делом,, а именно вёрсткой и своим каналом.
Спасибо вам огромное за труд.
Пожалуйста!
Евгений спасибо вам, от чистого сердца. Вам преподавательский талант и желание радует глаз. Уроки прекрасны.👨🎓
Суперское преподнесение материала, очень четко, по существу, без воды и всяких там отвлечений на исправления и мекание-бекание. Просто класс!!!! Очень приятно смотреть! Жму руку! Респект огромный!!!
Очень полезная информация. Сделайте максимальный репост людям, которые интерисуются этой темой! Пусть информации чуть меньше чем в платных курсах, но подача очень крутая и все получается на раз два!
Спасибо!
Большое спасибо за то, что вы делаете! У вас очень хорошо получается разъяснять и доносить информацию, не бросайте это дело! Каждый урок просто шикарен и очень информативен!
Спасибо! Рад что полезно!
Самое лучшее объяснение позиционирования, которое я где либо читал или смотрел! Большое спасибо!
Как же всё доходчиво и наглядно! Спасибо!
Спасибо за уроки, очень интересно и познавательно !!!
Пожалуйста!
Огромное спасибо за урок, и за потрясающую методичку!))) 🔥🔥🔥
Пожалуйста!
І ще раз дякую за таке чітке, повне і доступне пояснення матеріалу. У свій час перечитав багато на MDN, але чи був не уважний, чи складно написано - багатьох речей не розумів так, як розумію тепер після твого пояснення. Дякую.
Огромное спасибо за эти понятные, нужные и веселые уроки без воды, приятно смотреть и учиться! Успехов! Учусь четыре месяца и ваш канал самое лучшее что произошло со мной за время обучения, рада, что остановилась в поиске нужной и понятной инфы!!!)))
Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)
Спасибо за разжеванное объяснение, везде где я читал про позиционирование было покрыто водой, было непонятным или бесполезным и т.д. Здесь же и подача, и сам материал без лишнего и по теме + отличные шпаргалки!
Спасибо! Очень доступная подача метериала!!!
Женя, большое тебе спасибо, что делаешь такие классные уроки, за 30 минут больше информации , чем в 2 часовом офлайн занятии, большое спасибо!!!!!!!
Уже который раз изучаю эту тему, и только сейчас стало все понятно!!! Благодарю!
пожалуйста!
Спасибо огромное за контент. У тебя самые лучшие уроки.
Я рад! Пожалуйста!
Огромное спасибо..живем рядом а увиделись через ЮтуБ
Это лучшее, что я смог найти! Спасибо огромное! Платные курсы - просто вымогательство на фоне этих уроков.
0:00 - Подготовка к уроку
3:56 - Position
--3:56 - static
--4:36 - relative
--6:53 - свойство z-index со значением relative
--8:53 - absolute
--14:01 - свойство z-index со значением absolute
--14:54 - fixed
--16:43 - свойство z-index со значением fixed
--17:08 - sticky
20:34 - Подводные камни использования absolute
23:56 - Примеры
28:43 - Методичка
28:53 - Напутствие
Спасибо за урок! Как всегда, всё очень круто и понятно. Единственное, что бы добавил - в момент демонстрации работы нескольких блоков с position: sticky дал бы второму из sticky блоков opacity:0 и посмотрел бы куда идут блоки после своей замены на новый sticky блок. Накапливаются ли они сверху, или остаются в том месте, где они сменились с новым sticky блок.
Наверно странно объяснил, но в любом случае никто не мешает поэкспериментировать самому
Спасибо!
Всё чётко и по делу, спасибо ОГРОМНОЕ за твои старания!=)
Пожалуйста!
Самый познавательный канал по программированию, который я когда либо встречал!
Это очень понятное объяснение довольно непростой темы. Рад, что открыл для себя этот канал. Автор даже сделал методичку по данной теме, за что отдельный респект) Просто браво, Евгений!
Спасибо, очень классно для новичков обьясняешь.
Пожалуйста!
Дякую тобі, добрий друже!
Будь ласка!
Спасибо! Интересный урок. Всё просто и не просто одновременно - нужно изучать
Спасибо Вам уважаемый лектор! Все очень интересно и полезно.
Все ТОП) Начинаешь понимать преимущества фриланса, когда представляешь сколько времени уходит на создание роликов. Жека, продолжай!
Спасибо! Согласен)
Самый крутой канал, спасибо автору за труды!!
Пожалуйста!