CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12
HTML-код
- Опубликовано: 5 авг 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
эти слова можно перед сном проговаривать "обучайся,развивайся и помни - живи,а работай в свободное время")
лайк автоматом)
Верно! Спасибо! 👍
Как молитва перед сном)
Отличный слоган. Остается только воплотить его в жизнь. Не во всех сфера и не у каждого это получится(!
Точно, афірмація
Бесплатный курс по вёрстке у Жеки намного превосходит платные курсы.
Спасибо большое!
это правда. Потому что цель платных курсов - срубить бабла, а изначальная цель Жеки - научить людей. Это разные вещи. Отсюда и результат
@@shelove4212 все платные курсы говно? Все? Я респектую автору этого видео, тут без вопросов. Но как же меня бесят такие как ты, ищешь бесплатные курсы, бесплатные книги, чтобы научиться зарабатывать. А авторы должны это просто так делать? Посмотрю я на тебя, если чего то добьешься в верстке, что маловероятно, напиши пару книг, и не бери за это деньги, потрать годик своей жизни , просто так)))
@@shelove4212 знаешь в чем правда, если бы автор этого видео, выставлял платные курсы, ты бы и на него гнал)) хотя он действительно хорошо объясняет
@@yatsan_rikk Человек Жеке комплимент хотел сделать, а тебя это - "Но как же меня бесят такие как ты". Жека делает добро, его хвалят, ты кидаешься говном, ор выше гор=) Добра тебе, а к доктору все же сходи=)
Боже, сколько мучений с этим позиционированием было... Просто тьма статей, уроков, глав из книг и все просто непонятно и бесполезно. Я НАКОНЕЦ-ТО, БЛАГОДАРЯ ТВОЕМУ УРОКУ ПОНЯЛ ЧТО ЭТО И КАК ОНО РАБОТАЕТ!!!!!! Жень, сказать что я благодарен - это не сказать ничего!!! В очередной раз просто хочу поблагодарить за твою работу, за твой настрой, позитив и уровень подачи материала! Это просто великолепно!!!! И еще, сейчас окончательно устаканится ситуация с короновирусом и т.д. и я обязательно оформлю подписку на патреон :)
Я очень рад!
Уже 2022 год почти а ситуация с короновирусом та же...
@@DeliWyle ага
кажется ты тоже решил программирование с нуля начать по урокам жени
@@user-gi8ln8bf5d да, и?
@@DeliWyle на тот момент я думал как то списаться чтобы вместе было легче обучаться
Все смотрю и удивляюсь,я не встречал еще таких людей,Вы действительно лучшее,что я когда либо смотре на RUclips!
Спасибо большое!
Спасибо что вырыгал говно в коменты!
@@user-gw4wl5ri8e Изыди отсель, frostbitten canal
@@FreelancerLifeStyle вопрос: сейчас, спустя 10 месяцев с момента выхода ролика, сейчас все нормально с поддержкой sticky в браузерах?
Как всегда все просто и понятно🤟
Спасибо Жека, так держать!
Мне кажется это лучше онлайн школы! Плюс ты еще и бесплатно это все преподаешь. Еще и ДЗ даешь. Просто крутой чувак и крутой канал!
30% первой зарплаты в IT индустрии, я переведу этому замечательному учителю)
Спасибо большое!
Такое же желание есть )
ПОДДЕРЖИВАЮ! КАК ОСИЛЮ! Я ТОЖЕ ЗА*
Аналогично. Подача информации такого количества и качества не должна оставаться без монетизации.
Я думал я один думал поддерживать автора как будут деньги (тавтология).
Жека , уроки огонь. Надеюсь и JS в наши головы запихаешь)
Конечно)
Привет, спасибо тебе за твой проект! Не бросай его)) Очень помогает мне и другим. Конечно много подобных блогов, но везде что-то не то. И обращение к тем кто смотрит - лайкайте видео!!!
Спасибо! Будет поддержка буду продолжать!
Платный курс на юдеми, тема позиционирование, на много меньше дал мне понять как работать с позиционированием, чем ваш урок! Большое вам благодарю!
Супер! Я рад!
Даа у меня тоже самое
Я занимаюсь на скилфактори, тоже самое тему позиционирование не сразу понимал пока не видел урок Жеки)))
Отдельно благодарю!!!
Устроился на работу?)
Как-то даже неудобно, в коментах люди потратили много денег и сил, чтобы с этой темой разобраться, а я узнала о ней сразу из урока Жени и непонимания не возникло совсем. Спасибо вам, добрый человек
еще занимаешься, как успехи?)
Родиииииительский блОк, начаааааало начАл... и в верстке твоей надежный причал...
Ваши уроки до сих пор актуальны и познавательны. Вы очень качественно объясняете и очень приятно слушать. Спасибо большое!
Ещё одно подтверждение качества материала! Спасибо тебе, и с Днём Рождения "Фрилансер по жизни"!
Спасибо большое!
Ніхто ще так гарно не пояснював, як ви)
Ваша харизма дійсно вражає, Евгенію!
Ты просто лучший. Такое чувство, будто попал на платный курс совершенно бесплатно. Я бы оценил такой курс минимум в 5к рублей
На улице 2022, в моей стране война и я лишился работы… Евгений, Вы лучший ! Благодаря Вашим роликам есть надежда полностью изменить свою жизнь и освоить новую профессию
А хочеш, щоб до тебе ще раз прийшли на захист узкоязычных? До Чечні ж двічі війною ходили.
Продовжуй в тому ж дусі сіяти "узкий мир", і насіння зійде і дасть ще плодів, якщо тобі їх досі замало.
@@OperatorCN Тебе хто з псіхушки випустив
@@OperatorCN О клоун нашёлся
А ты красава! Продолжай в том же духе! Надеюсь у тебя всё выйдет и у тебя выйдет изменить свою жизнь к лучшему
@@OperatorCN , а ты думаешь они пришли потому что тут есть русскоговорящие?Это всего один из надуманых предлогов для войны, были бы все украиноговорящие, абсолютно ничего бы не изменилось.
Материал отличный!!!!! Кто смотрит - не забываем про лайки!
Спасибо! 👍
У меня нет слов, одни эмоции. Самый топовый учитель !!!
Я рад!
Жека,про весь твой канал можно сказать так : я искал медь,а нашел золото!Спасибо тебе!
Здоровья автору и его близким! Кучу денег и океан счастья! Ты делаешь людей умнее! Даже я 32 летний лоб понимаю всё, о чём ты рассказываешь. Это лучший блогер, программер, учитель, коуч и человек)!
Шёл 2023 год. А Твои уроки более чем актуальны!
Спасибо за труды и всего самого наилучшего!
как успехи?
@@kostya4182 познаю азы Реакта для трудоустройства и портфолио в целом. Благодарю, что поинтересовались)
За методичку и обнуляющий стиль отдельный лайк.
Женя, как самый настоящий Прометей несет нам пламя знаний в безупречной верстке! Огромная благодарность тебе наш Учитель!
Умею верстать на flex. Уже сверстал пару качественных лендингов, но position не понемеал. Спасибо тебе, теперь все ясно как чистое небо. Определенно лайк.
Спасибо! 👍👍🤟
Смысл в позишн, когда есть флекс?
Господи! Як добре, що я знайшла ваш канал, Євгене! Дякую🙏
Є люди-професіонали, але вони не вміють викладати інформацію, і тому їх урокі безглузді і складні.
Ваші туторіали НАСТІЛЬКИ прості і методичні в розумінні, що я дивлюся ваші лекції кожен раз, коли англійською я просто вже не доганяю😂 дякую вам величезне. Слава Україні 💛💙
Каким-то магическим образом вдохновляет на позитив:
"Обучайся, развивайся и помни - живи, а работай в свободное время"
Жека, Спасибо за контент!!!!!
Храни тебя Господь!) только после твоего видео я нормально разобрался в позиционировании элементов и как это все работает.
Всего тебе самого наилучшего
Супер! Я рад!
Женя, ты лучший!
Прохожу платный курс по гос. программе "Основы Frontend разработки" и человек может мямлить целый час, но в итоге никаких знаний после урока не остается.
Каждый раз после основного урока на курсе сажусь смотреть твои видео. И за пол часа я понял больше, то что нам пытаются разжевать за два часа!!!
Это даже не благотворительность. Ты бесплатно делаешь то, чего другие не могут предложить за хорошие деньги. Ты просто ТОП.
Очередной лайк Евгению за урок, подачу и, конечно же, за еще одну методичку!
Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)
Очень доходчиво изложено про поток и как различные типы позиционирования в нем себя ведут! Женя, большое спасибо! Идея с методичкой очень крутая, я все это в свое время рисовал в блокноте) Контент крутяк!
Спасибо большое! Двигаемся дальше!
Привет! Спасибо тебе за твой труд! Безмерно тебе благодарен🙏 все очень понятно! Всего хорошего тебе, и не забывай про нас, делись своими материалами и с нами!
Огромное спасибо тебе Жека за такой бесплатный курс!!! Очень помогает!👍👍👍 Здоровья тебе и твоей семье крепкого!!!)
На твоих курсах намного больше полезной информации чем во всем русском ютубе по web разработке!! Красавец
Я бы мог сюда приплести, то что это тоже русс Ютуб и что получается что часть русс Ютуба занимает больше чем весь русс Ютуб, а это невозможно, но не буду, потому что ... просто так
За методичку готов еще несколько лайков поставить, жаль, ютуб не позволяет :D Урок как всегда на высшем уровне! Все доходчиво и главное, понятно (удивительно)! :D Спасибо, Женя!
Спасибо, стараюсь))
восторг! все становится интуитивно понятно, ну и методички - ванлав )))
Канал находка, помимо приобретенных курсов, посматриваю этот канал.
Исключительно в пояснительных целях огонь
Потрясающая работа и монтаж! Большая благодарность вам за просвещение! :)
Спасибо стараюсь 😊👍🤘
Друг, спасибо тебе большое за изложение такого ценного материала! Твоя подача и комплексный подход к делу поражают! Намного лучше платных курсов. Благодарите автора донатами, за такие вещи это делать нужно! И ты развивайся! Успехов тебе!
На ютубе понятнее курса не видел. Надеюсь, твой труд хоть как-то оправдывается.
Искренне благодарен!
Женя, привет! Спасибо тебе огромное за твою работу!!! очень доходчиво !!! не знаю что бы делал без твоих уроков, на конец то все встает на свои места!!!!
Я, честно не понимаю, почему такой маленький процент лайков по отношению к просмотрам???? Блин, да это реально лучшие уроки для новичков из тех , что я видел в ру сегменте. Всякие там html-academy и рядом не стояли, по уровню подачи материала!
Спасибо! Я рад!
Ребята, надеюсь выпуск понравился! Буду рад лайкам и комментам!
Поддержать канал: www.patreon.com/freelancerlifestyle
И еще пара полезных ссылок:
Чат по верстке: t.me/flschat
Instagram: instagram.com/freelancer.lifestyle
Telegram канал: t.me/freelancer_lifestyle
Facebook: facebook.com/freelancerlifestyle
Вот и еще одна методичка подъехала, просто лучший!
Так легко и доступно объясняете материал, спасибо Вам огромное!!!
По словам Чарльза Буковски -
"Интеллектуал о простой вещи говорит сложно - художник сложную вещь описывает простыми словами".
Спасибо!
Как всегда, все доступно и толково! Спасибо!!!
Пожалуйста!
Спасибо за то что вы для нас делаете!!!Уроки ОГОНЬ!!!!!
Спасибо, очень доходчиво и человеческим языком рассказано, так, что никаких вопросов касательно позиционирования не возникает. Прям в подкорку :)
Евгений, спасибо Вам за работу! Вы вселяете надежду в мои собственные силы!
Я рад!
Все по делу, сжато, четко, понятно. Замечательное видео, большое спасибо.
Пожалуйста
исчерпывающие ответы на многие вопросы нашел на этом канале, крутой автор!
Спасибо за очень полезное видео, качество супер, подача лучшая что видел.
Жека, у тебя дар преподования! Всё как всегда на высшем уровне)
Спасибо! 👍🤘😅
Вас приятно слушать и на вас приятно смотреть. Спасибо за наиполезнейший урок!
Спасибо большое! Я очень рад что полезно!
Привет, Женя! Спасибо тебе большое за такое понятное объяснение, такой серьезной темы.
еще одна методичка! вуууухууу спасибо! методички просто максимально полезны и очень помогают закрепить визуально и уложить в голове свойства поведения тех или иных объектов) Спасибо!
Спасибо за разжеванное объяснение, везде где я читал про позиционирование было покрыто водой, было непонятным или бесполезным и т.д. Здесь же и подача, и сам материал без лишнего и по теме + отличные шпаргалки!
Огромное спасибо за урок, и за потрясающую методичку!))) 🔥🔥🔥
Пожалуйста!
Очень интересная тема и она отлично подана Вами! Спасибо за труды!
Самое лучшее объяснение позиционирования, которое я где либо читал или смотрел! Большое спасибо!
Всё чётко и по делу, спасибо ОГРОМНОЕ за твои старания!=)
Пожалуйста!
Опять все ясно,четко как и в предыдущих уроках.Ничего подобного не встречал.Информации много, надо время что бы уложилась, но подача материала просто ЗАМЕЧАТЕЛЬНАЯ!
Спасибо!
Спасибо Вам уважаемый лектор! Все очень интересно и полезно.
Это очень понятное объяснение довольно непростой темы. Рад, что открыл для себя этот канал. Автор даже сделал методичку по данной теме, за что отдельный респект) Просто браво, Евгений!
Все ТОП) Начинаешь понимать преимущества фриланса, когда представляешь сколько времени уходит на создание роликов. Жека, продолжай!
Спасибо! Согласен)
Большое спасибо за то, что вы делаете! У вас очень хорошо получается разъяснять и доносить информацию, не бросайте это дело! Каждый урок просто шикарен и очень информативен!
Спасибо! Рад что полезно!
Это лучшее объяснение свойств position и z-index, что я нашел на просторах интернета.
Наконец-то я поняла как работает absolute)) Спасибо, Женя! Очень доступно и интересно объясняете :)
Уже который раз изучаю эту тему, и только сейчас стало все понятно!!! Благодарю!
пожалуйста!
Спасибо огромное за контент. У тебя самые лучшие уроки.
Я рад! Пожалуйста!
Спасибо огромное !Ни выразить словом ни кодом описать на сколько этот канал хорош
Евгений спасибо вам, от чистого сердца. Вам преподавательский талант и желание радует глаз. Уроки прекрасны.👨🎓
Спасибо за уроки, очень интересно и познавательно !!!
Пожалуйста!
Очень полезная информация. Сделайте максимальный репост людям, которые интерисуются этой темой! Пусть информации чуть меньше чем в платных курсах, но подача очень крутая и все получается на раз два!
Спасибо!
Огромное спасибо за эти понятные, нужные и веселые уроки без воды, приятно смотреть и учиться! Успехов! Учусь четыре месяца и ваш канал самое лучшее что произошло со мной за время обучения, рада, что остановилась в поиске нужной и понятной инфы!!!)))
Это лучшее, что я смог найти! Спасибо огромное! Платные курсы - просто вымогательство на фоне этих уроков.
Большое спасибо за уроки и за видео о правилах учебы в этой сфере. Применяю все советы. Желаю Вам всего самого наилучшего!
Спасибо! Рад что нравится
Катерина, как обстоят дела через 9 месяцев? уже работаете или еще учитесь?
@@Ananasovna94 здравствуйте, ввиду того, что на мне двое малышей, немного затянулась учёба, но продолжаю не смотря ни на что! Учусь в школе rs school, задания выполняю, очень помогают видео Евгения!
Шикарно,то я всем время путался в них!Спасибо!
Пожалуйста!
ты лучший Жека , я многих смотрел...спасибо что меняешь жизнь в лучшую сторону!)
Как обычно-все четно и понятно!Спасибо!👍👍👍👍
Подписался на ваш канал и теперь смотрю каждый день. Спасибо что вы делитесь своими навыками.
Хочу также добавить что я смотрю платные курсы по вёрстке и материал подачи у вас лучше , очень доходчиво объясняете, складывается впечатление что вы действительно занимайтесь любимым делом,, а именно вёрсткой и своим каналом.
Спасибо вам огромное за труд.
Пожалуйста!
Самый крутой канал, спасибо автору за труды!!
Пожалуйста!
Благодарю вас за отличный урок, вы прекрасно объясняете, отличные аналогии и примеры приводите!
Евгений, ты просто Супер учитель! Спасибо тебе огромное за твой труд! Это просто восхитительно!
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 блок.
Наверно странно объяснил, но в любом случае никто не мешает поэкспериментировать самому
Спасибо!
Зашла освежить свои скудные знания по верстке, а тут такой клад с новой и полезной инфой! 😍 Отличный канал, спасибо, Женя!
Супер, я рад!
Это первое вразумительное и понятное объяснение про z-index, left, right, top и bottom, из всех мной просмотренных! Огромное спасибо!
Пожалуйста!
Вы разбалуете нас таким качественным контентом, нетипичным для ютьюба. Но это не плохо. Методички у вас супер, спасибо огромное за такую качественную подачу материала
Помогаешь людям, Жека, и добро обязательно вернется тебе!!! =)))
Рад что полезно!
Спасибо, очень классно для новичков обьясняешь.
Пожалуйста!
Урок отличный, всё четко разложено по полкам, Большое спасибо!
Самый познавательный канал по программированию, который я когда либо встречал!
Урок классный! свойство - sticky прикольное, новое для меня))
Спасибо! 👍
Вот ты тут круто расчехлил)) спасибо)
Пожалуйста!
Что-то я ничего не понимала с этим позиционированием, а после просмотра видео кааак поняла. Спасибо ❤
Женя, отличный урок! Очень важная и интересная тема! Не останавливайся!!!
Дякую тобі, добрий друже!
Будь ласка!
Женя максимально точно уловил, то что нужно для начинающих верстальщиков! Годный контент! 👍