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