Тёмный

Полный разбор position в css. Позиционирование в css + примеры. 

Web Dev Tips
Подписаться 2,5 тыс.
Просмотров 26 тыс.
50% 1

Приветствую, друзья. Сегодня мы с вами разберем то, как работает свойство position в css. Рассмотрим position absolute, static, relative, fixed, sticky. Так же мы рассмотрим как работает позиционирование в css на примерах с реальной работы.
semenyuk73.com/ - заказать сайт
Таймкоды:
00:00 Вступление
1:25 Position static
1:58 Position relative
3:52 Position absolute
7:45 Центрирование с relative + absolute
11:45 Position fixed
13:33 Position sticky
16:00 Примеры в реальной работе
21:51 Завершение

Опубликовано:

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 109   
@stass3251
@stass3251 2 года назад
Либо я тупой, либо не те уроки смотрел, но почему то ваш урок расставил все по полочкам. Спасибо!
@andavidov
@andavidov 10 месяцев назад
Спасибо, единственный, кто нормально и доходчиво пояснил.
@OsuManiaMap
@OsuManiaMap 2 года назад
Это уже наверное 15 видео которое я смотрю про позиционирование.. и теперь я с уверенностью могу сказать что я наконец поняла... Спасибо огромное!
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@skatler5741
@skatler5741 2 года назад
Так нужно не только смотреть )
@bl00dyJS
@bl00dyJS Год назад
@@skatler5741 Согласен , без практики программирование не прогаммирование
@bl00dyJS
@bl00dyJS Год назад
А ты девочка , понимаю ,ситуации где девочки изучают программирование я встречаю редко , Обычно программисты это мальчики
@dvq8726
@dvq8726 Год назад
@@bl00dyJS Ада Августа Лавлейс - английский математик, дочь великого английского поэта Байрона. Ада Лавлейс занималась изучением вычислительной машины Чарльза Бэббиджа. В 1843 года Ада Лавлейс оставила первую в мире программу для этой машины. Первый в мире программист. PS Возможно после этого твой мир пошатнется )))😁
@Mr-in8km
@Mr-in8km Месяц назад
огромное спасибо за полезный урок с примерами
@Clamator
@Clamator Год назад
спасибо за видео)) на 5:39 на удержался и пропел somebody once told me.... =D
@rimavedeckiene2203
@rimavedeckiene2203 4 месяца назад
Thanks for the very clear examples with position. Everything became clear.
@user-eg6kp3ko8l
@user-eg6kp3ko8l Год назад
Действительно толковый урок, особенно термины физическое и визуальное положение!
@user-eo3vw5jb9s
@user-eo3vw5jb9s Год назад
Спасибо, незнакомый друг! Респект тебе большой!
@frontend_notes
@frontend_notes 2 года назад
за примеры в конце отдельное спасибо
@user-ek9vr7uw8p
@user-ek9vr7uw8p 2 года назад
Брат, от души спасибо. У тебя талант объяснять темы)👍
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@intro_true
@intro_true Год назад
Спасибо за видео! Реально приблизилось 100-процентное понимание! осталось разобраться с флексами😅
@dre1kke
@dre1kke Год назад
Мой комментарий уже будет дико неоригинален. Но я реально смотрю уже "...дцатое" видео про позиционирование, т.к. никак не могу до конца понять эту тему. Именно ЭТО видео настолько просто и легко помогло мне прекрасно понять что, как и когда делать. Просто нереально огромнейшее спасибо! С меня лайк, подписка и захлёбный просмотр остального контента (буду искать ответы на парочку таких же муторных для меня вопросов - свойство display и адаптивную верстку. Еще раз спасибо и удачи Вам!!!
@prio1074
@prio1074 5 месяцев назад
Спасибище! Смотрел много других примеров не заходило. После этого видео наконец стало ясно.
@yuriyzadorozhnyi3849
@yuriyzadorozhnyi3849 Год назад
Дякую за якісне і зрозуміле пояснення теми . Радий що знайшов Ваш канал де дуже багато потрібної інформації для мене початківця в цїй справі ! Щиро вдячний вам за можливість навчатися безкоштовно і що ділитеся своїми знаннями . Для початківця складно зразу за все платити , багато всього потрібно . Добре що є ще такі люди як ви , дай Вам Бог здоров'я !
@nadiasierova
@nadiasierova 7 месяцев назад
Спасибо большое за примеры на сайтах, это ооооочень помогло
@imdanteasy
@imdanteasy Год назад
Спасибо за видео! Быстро и понятно объяснили эту тему!
@tuukaaa
@tuukaaa Год назад
Лучший урок по данной теме. Спасибо!!!!
@sulejmanpovelitel1220
@sulejmanpovelitel1220 Год назад
Хороший урок получился, все по делу без лишней воды , спасибо ! Ждем новых видео от вас
@nurillo_abdurafikov
@nurillo_abdurafikov 2 года назад
Просто шикарный урок! Прям нет слов описать всю крутость видео!!!
@testor7627
@testor7627 2 года назад
Как вы мне помогли. Как раз искал, как позиционированный обьект отцентрировать на изображение. Спасибо ВАМ!
@one_punchmorty8140
@one_punchmorty8140 2 года назад
Спасибо тебе большое, очень доходчиво и просто! Особенно круто смотрятся примеры реальных работ!
@aliakseipliutsinski2890
@aliakseipliutsinski2890 Год назад
огромное спасибо за это видео! очень помогло!!!❤
@Gorgul
@Gorgul Год назад
Спасибо, очень наглядное объяснение
@ajsijushnik
@ajsijushnik 2 года назад
Отличное объяснение для position в css. Теория очень четкая с демонстрацией относительного расположения одного блока относительо других. Однако, когда дело дошло до реальных сайтов, как-то всё те же термины оказалось сложно отследить в общем контексте ))
@user-kc6mn4iq2p
@user-kc6mn4iq2p 2 года назад
Хороший урок, простое объяснение теории, примеры очень кстати. Спасибо огромное! Удачи!)
@Tsvitko
@Tsvitko 2 года назад
Отлично объяснил! Спасибо большое!
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@PerecNeDorogo
@PerecNeDorogo Год назад
Лайк видео и комментарий для продвижения. Это видео стоит смотреть. Очень толково и полезно! Автору огромное спасибо!
@user-mm3nw4xk4v
@user-mm3nw4xk4v 2 года назад
Спасибо за примеры с сайтами, намного лучше помогает понять куда применить то или иное позиционирование👍
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@mikhailbykov6311
@mikhailbykov6311 2 года назад
Классный урок! Спасибо огромное!
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@user-vl1zz3xn1s
@user-vl1zz3xn1s 2 года назад
Отличное видео!👏👏
@user-js3qi4hg6h
@user-js3qi4hg6h Год назад
ооооо спасибо братан я вообще не пони мал теперь понимаю от души братан
@user-te8sp8li3d
@user-te8sp8li3d 3 года назад
Броооооооо! Какая же ты умница!)))
@Denwork2017
@Denwork2017 2 года назад
Реально круто!!! Все просто и понятно!!! Спасибо и ждем "transform"
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@denissavast
@denissavast Год назад
Огромное спасибо вам
@user-ws5ev1bi2b
@user-ws5ev1bi2b 2 года назад
смотрю второе видеоурока про позиционирование, спасибо, все понятно)
@IOpeu
@IOpeu Год назад
Спасибо, друг!
@niskofly1910
@niskofly1910 2 года назад
очень круто объясняешь, буду ждать полноценных курсов
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@6odio9
@6odio9 2 года назад
спасибо чувак, лучший урок по position на этой платформе
@user-jn1kx5gf1m
@user-jn1kx5gf1m 2 года назад
спасибо, очень полезное видео 😇
@WebDevTips
@WebDevTips 2 года назад
Вам спасибо за отзыв)
@michaelmelnikov5318
@michaelmelnikov5318 2 года назад
Otlichno, spasibo bolshoe sa urok : )
@orazaliorazali1000
@orazaliorazali1000 7 месяцев назад
Благодарю!
@Gazovchik
@Gazovchik Год назад
Всем привет Вроде бы нет никаких вопросов Автору Спасибо за Работу!
@user-uw8kc2zr8e
@user-uw8kc2zr8e Год назад
Очень хороший урок спс за классный урок
@user-yp7nn8ys3g
@user-yp7nn8ys3g Год назад
здоровья тебе
@igorbaydin
@igorbaydin 2 года назад
мега полезное видео!
@st0nedcreature17
@st0nedcreature17 Год назад
Отличное видео, друг, спасибо.
@dimaudovenko585
@dimaudovenko585 Год назад
Спасибо!
@user-jn1kx5gf1m
@user-jn1kx5gf1m 2 года назад
видео просмотрел на одном дыхании, выпускай побольше обучающих видео
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@alonahilbert9959
@alonahilbert9959 Год назад
Дякую за відео, нарешті зрозуміла про absolute
@astronaut1751
@astronaut1751 2 года назад
Спасибо за хорошее объяснение
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@astronaut1751
@astronaut1751 2 года назад
@@WebDevTips у меня вопрос , а можно ли позиционировать текст ( к тексту добавлять абсолют и тп ) чтобы его двигать по сайту или это только к блокам ) заранее спасибо
@WebDevTips
@WebDevTips 2 года назад
Можно, главное обернуть текст в тег, например в параграф
@user-te8sp8li3d
@user-te8sp8li3d 3 года назад
Это так подробно и так по сути))
@dollar4309
@dollar4309 2 года назад
сколько видео смотрел не мог понять но ты сразу четко обяснил !!!! спасибо но и продалжай так с css
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@user-gx8sz7ht9k
@user-gx8sz7ht9k 2 года назад
Вопросов нет. Спасибо.
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@denismaltcev3356
@denismaltcev3356 3 года назад
Спасибо бро ты про 😎
@WebDevTips
@WebDevTips 3 года назад
Спасибо за комментарий)
@BunnyBlood
@BunnyBlood Год назад
ты лучший друг
@user-nn9qy1yh3s
@user-nn9qy1yh3s Год назад
я в шоке, где ты был раньше,,,, я уже весь мозг сломал - вроде бы и разобрался, но на практике проблемы, а с этим видосом мой мозг все понял и физически и виртуально
@ProgCe
@ProgCe 4 месяца назад
теперь у меня проблемы с margin и padding(
@user-nn9qy1yh3s
@user-nn9qy1yh3s 4 месяца назад
@@ProgCe стандартный комент троля
@pawa7586
@pawa7586 2 года назад
5:39 once told me the world is gonna roll me
@dobrMAV
@dobrMAV 2 года назад
Спасибо за полезный урок!Сейчас учу CSS что то уже понимаю,а что то дается непросто .Будет ли продолжение уроков по CSS ?
@kontorasb2754
@kontorasb2754 3 года назад
Спасибо за урок. Нужен урок по transform!!!!!!!
@WebDevTips
@WebDevTips 2 года назад
С задержкой в 5 месяцев, но видео уже на канале)
@mihail_krash
@mihail_krash Год назад
У меня страница сайта формируется javascript-ом динамически (createElement), и что я только не делал динамический javascript накладывается на блок position: fixed... z-index-ы не помогают, я их в динамике тоже задавал 0, но они все равно накладываются на мой блок position: fixed с максимальным z-index-ом...
@ob7349
@ob7349 2 года назад
да! видео по transform
@alexkuzmichev9623
@alexkuzmichev9623 Год назад
Спасибо, отличное видео. единственное осталось непонятно, при position: fixed; , вне зависимости от Position: " родителя, элемент позиционируется относительно всего окна браузера, правильно я понял? То есть в любом случае фиксируется в выбранном месте окна браузера и это не зависит от position других элементов?
@Obraveliss
@Obraveliss 3 года назад
Вот это я понимаю уровень контента повысился, эканья намного меньше :) ещё и таймкоды добавил это очень помогает когда пересматриваю видео Видео полезное, наконец-то я начал лучше понимать фишку с визуальной и физической составляющей позиционирования Было сказано, что можно задавать вопросы у меня 2 вопроса, Задам сразу второй так как у меня коммент с первым вопросом удалился, из-за сслыки на codepen :( 2) У тебя должно быть есть свой порядок выхода видео Но можно видео с этим width, max-width, heiht, max-height в особенности с этими двумя width, max-width? :)
@WebDevTips
@WebDevTips 3 года назад
Спасибо за комментарий) Можете сюда вопрос написать - t.me/webdevtips_ru
@darklight7002
@darklight7002 2 года назад
Шикарно. Спасибо тебе большое!
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@mefistofelesfuckgood
@mefistofelesfuckgood 2 года назад
а что по поводу position:inherit?
@pupizoid100
@pupizoid100 Год назад
transform: translate -50% по координате X это в сторону left? А -50 % по координате Y это в сторону top?
@artas3927
@artas3927 2 года назад
Подскажите пожалуйста, как сделать автоматическое изменение сайта? Когда Вы сохраняете проект, то страница сразу принимает новые значения
@WebDevTips
@WebDevTips 2 года назад
Здравствуйте, конкретно в том видео я использовал расширение Live Server для VS Code
@Sward66
@Sward66 2 года назад
Так мало просмотров у такого качественного видоса
@user-ps2ge3cc5r
@user-ps2ge3cc5r 2 года назад
good
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий)
@harvestharvest2103
@harvestharvest2103 2 года назад
То есть если у нас pos fixed, то он в любом случае будет позиционироваться относительно окна браузера, не взирая на то, что у его родителя например pos absolute?
@WebDevTips
@WebDevTips 2 года назад
Спасибо за комментарий) Да, верно.
@deafdeaf6348
@deafdeaf6348 2 года назад
Здравствуйте, как быть если я за позиционировал элементы относительно окна браузера, но при масштабировании они разлетаются. Что делать в таком случае?
@WebDevTips
@WebDevTips 2 года назад
Здравствуйте, попробуйте спозиционировать не в пикслелях, а в процентах.
@deafdeaf6348
@deafdeaf6348 2 года назад
@@WebDevTips картинки все равно разлетаются, но в меньщих пропорциях. Но это не так критично Еще я задал главному блоку фон(тоже маленькие картинки),(у этого блока position reletive, и их я споцизионировал свойством background position. И при масштабировании они так же разлетаются.
@FrankyyBalboa
@FrankyyBalboa Год назад
Здравствуйте. Почему position fixed перекрывает родителя? Тема не раскрыта до конца.
@1MrAnonymous11
@1MrAnonymous11 3 года назад
Я так понимаю у body по умолчанию relative?
@nelson_does
@nelson_does 2 года назад
что нужно сделать чтоб блок не был привязан к родителю
@Emil8Angel
@Emil8Angel 2 года назад
не делать ему position: relative. тогда он спозиционируется относительно ближайшего родителя с position: absolute или если такого не найдётся, то относительно body
@nelson_does
@nelson_does 2 года назад
@@Emil8Angel Уже понял, спасибо)
Далее
САМЫЕ ТУПЫЕ МАЖОРЫ С ПАТРИКОВ
33:19
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн
САМЫЕ ТУПЫЕ МАЖОРЫ С ПАТРИКОВ
33:19