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

  Переглядів 25,424

Web Dev Tips

Web Dev Tips

День тому

Приветствую, друзья. Сегодня мы с вами разберем то, как работает свойство 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 Завершение

КОМЕНТАРІ: 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 17 днів тому
огромное спасибо за полезный урок с примерами
@user-eg6kp3ko8l
@user-eg6kp3ko8l Рік тому
Действительно толковый урок, особенно термины физическое и визуальное положение!
@yuriyzadorozhnyi3849
@yuriyzadorozhnyi3849 Рік тому
Дякую за якісне і зрозуміле пояснення теми . Радий що знайшов Ваш канал де дуже багато потрібної інформації для мене початківця в цїй справі ! Щиро вдячний вам за можливість навчатися безкоштовно і що ділитеся своїми знаннями . Для початківця складно зразу за все платити , багато всього потрібно . Добре що є ще такі люди як ви , дай Вам Бог здоров'я !
@rimavedeckiene2203
@rimavedeckiene2203 4 місяці тому
Thanks for the very clear examples with position. Everything became clear.
@user-eo3vw5jb9s
@user-eo3vw5jb9s Рік тому
Спасибо, незнакомый друг! Респект тебе большой!
@Clamator
@Clamator Рік тому
спасибо за видео)) на 5:39 на удержался и пропел somebody once told me.... =D
@user-ek9vr7uw8p
@user-ek9vr7uw8p 2 роки тому
Брат, от души спасибо. У тебя талант объяснять темы)👍
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@intro_true
@intro_true Рік тому
Спасибо за видео! Реально приблизилось 100-процентное понимание! осталось разобраться с флексами😅
@hangmansjoking
@hangmansjoking Рік тому
Мой комментарий уже будет дико неоригинален. Но я реально смотрю уже "...дцатое" видео про позиционирование, т.к. никак не могу до конца понять эту тему. Именно ЭТО видео настолько просто и легко помогло мне прекрасно понять что, как и когда делать. Просто нереально огромнейшее спасибо! С меня лайк, подписка и захлёбный просмотр остального контента (буду искать ответы на парочку таких же муторных для меня вопросов - свойство display и адаптивную верстку. Еще раз спасибо и удачи Вам!!!
@frontend_notes
@frontend_notes 2 роки тому
за примеры в конце отдельное спасибо
@one_punchmorty8140
@one_punchmorty8140 2 роки тому
Спасибо тебе большое, очень доходчиво и просто! Особенно круто смотрятся примеры реальных работ!
@user-kc6mn4iq2p
@user-kc6mn4iq2p 2 роки тому
Хороший урок, простое объяснение теории, примеры очень кстати. Спасибо огромное! Удачи!)
@prio1074
@prio1074 5 місяців тому
Спасибище! Смотрел много других примеров не заходило. После этого видео наконец стало ясно.
@nurillo_abdurafikov
@nurillo_abdurafikov 2 роки тому
Просто шикарный урок! Прям нет слов описать всю крутость видео!!!
@testor7627
@testor7627 2 роки тому
Как вы мне помогли. Как раз искал, как позиционированный обьект отцентрировать на изображение. Спасибо ВАМ!
@user-mm3nw4xk4v
@user-mm3nw4xk4v 2 роки тому
Спасибо за примеры с сайтами, намного лучше помогает понять куда применить то или иное позиционирование👍
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@nadiasierova
@nadiasierova 7 місяців тому
Спасибо большое за примеры на сайтах, это ооооочень помогло
@user-jn1kx5gf1m
@user-jn1kx5gf1m 2 роки тому
видео просмотрел на одном дыхании, выпускай побольше обучающих видео
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@imdanteasy
@imdanteasy Рік тому
Спасибо за видео! Быстро и понятно объяснили эту тему!
@tuukaaa
@tuukaaa Рік тому
Лучший урок по данной теме. Спасибо!!!!
@ajsijushnik
@ajsijushnik 2 роки тому
Отличное объяснение для position в css. Теория очень четкая с демонстрацией относительного расположения одного блока относительо других. Однако, когда дело дошло до реальных сайтов, как-то всё те же термины оказалось сложно отследить в общем контексте ))
@sulejmanpovelitel1220
@sulejmanpovelitel1220 Рік тому
Хороший урок получился, все по делу без лишней воды , спасибо ! Ждем новых видео от вас
@user-js3qi4hg6h
@user-js3qi4hg6h Рік тому
ооооо спасибо братан я вообще не пони мал теперь понимаю от души братан
@6odio9
@6odio9 2 роки тому
спасибо чувак, лучший урок по position на этой платформе
@Gorgul
@Gorgul Рік тому
Спасибо, очень наглядное объяснение
@aliakseipliutsinski2890
@aliakseipliutsinski2890 Рік тому
огромное спасибо за это видео! очень помогло!!!❤
@niskofly1910
@niskofly1910 2 роки тому
очень круто объясняешь, буду ждать полноценных курсов
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@alonahilbert9959
@alonahilbert9959 Рік тому
Дякую за відео, нарешті зрозуміла про absolute
@user-vl1zz3xn1s
@user-vl1zz3xn1s Рік тому
Отличное видео!👏👏
@user-te8sp8li3d
@user-te8sp8li3d 3 роки тому
Броооооооо! Какая же ты умница!)))
@user-ws5ev1bi2b
@user-ws5ev1bi2b 2 роки тому
смотрю второе видеоурока про позиционирование, спасибо, все понятно)
@Tsvitko
@Tsvitko 2 роки тому
Отлично объяснил! Спасибо большое!
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@PerecNeDorogo
@PerecNeDorogo Рік тому
Лайк видео и комментарий для продвижения. Это видео стоит смотреть. Очень толково и полезно! Автору огромное спасибо!
@IOpeu
@IOpeu Рік тому
Спасибо, друг!
@Denwork2017
@Denwork2017 2 роки тому
Реально круто!!! Все просто и понятно!!! Спасибо и ждем "transform"
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@Gazovchik
@Gazovchik Рік тому
Всем привет Вроде бы нет никаких вопросов Автору Спасибо за Работу!
@dollar4309
@dollar4309 2 роки тому
сколько видео смотрел не мог понять но ты сразу четко обяснил !!!! спасибо но и продалжай так с css
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@mikhailbykov6311
@mikhailbykov6311 2 роки тому
Классный урок! Спасибо огромное!
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@user-jn1kx5gf1m
@user-jn1kx5gf1m 2 роки тому
спасибо, очень полезное видео 😇
@WebDevTips
@WebDevTips 2 роки тому
Вам спасибо за отзыв)
@denissavast
@denissavast Рік тому
Огромное спасибо вам
@orazaliorazali1000
@orazaliorazali1000 7 місяців тому
Благодарю!
@user-te8sp8li3d
@user-te8sp8li3d 3 роки тому
Это так подробно и так по сути))
@igorbaydin
@igorbaydin Рік тому
мега полезное видео!
@dimaudovenko585
@dimaudovenko585 Рік тому
Спасибо!
@astronaut1751
@astronaut1751 2 роки тому
Спасибо за хорошее объяснение
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@astronaut1751
@astronaut1751 2 роки тому
@@WebDevTips у меня вопрос , а можно ли позиционировать текст ( к тексту добавлять абсолют и тп ) чтобы его двигать по сайту или это только к блокам ) заранее спасибо
@WebDevTips
@WebDevTips 2 роки тому
Можно, главное обернуть текст в тег, например в параграф
@michaelmelnikov5318
@michaelmelnikov5318 2 роки тому
Otlichno, spasibo bolshoe sa urok : )
@user-uw8kc2zr8e
@user-uw8kc2zr8e Рік тому
Очень хороший урок спс за классный урок
@user-yp7nn8ys3g
@user-yp7nn8ys3g Рік тому
здоровья тебе
@denismaltcev3356
@denismaltcev3356 3 роки тому
Спасибо бро ты про 😎
@WebDevTips
@WebDevTips 3 роки тому
Спасибо за комментарий)
@user-nn9qy1yh3s
@user-nn9qy1yh3s Рік тому
я в шоке, где ты был раньше,,,, я уже весь мозг сломал - вроде бы и разобрался, но на практике проблемы, а с этим видосом мой мозг все понял и физически и виртуально
@ProgCe
@ProgCe 3 місяці тому
теперь у меня проблемы с margin и padding(
@user-nn9qy1yh3s
@user-nn9qy1yh3s 3 місяці тому
@@ProgCe стандартный комент троля
@user-gx8sz7ht9k
@user-gx8sz7ht9k 2 роки тому
Вопросов нет. Спасибо.
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@BunnyBlood
@BunnyBlood Рік тому
ты лучший друг
@kontorasb2754
@kontorasb2754 3 роки тому
Спасибо за урок. Нужен урок по transform!!!!!!!
@WebDevTips
@WebDevTips 2 роки тому
С задержкой в 5 месяцев, но видео уже на канале)
@dobrMAV
@dobrMAV 2 роки тому
Спасибо за полезный урок!Сейчас учу CSS что то уже понимаю,а что то дается непросто .Будет ли продолжение уроков по CSS ?
@darklight7002
@darklight7002 2 роки тому
Шикарно. Спасибо тебе большое!
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@Obraveliss
@Obraveliss 3 роки тому
Вот это я понимаю уровень контента повысился, эканья намного меньше :) ещё и таймкоды добавил это очень помогает когда пересматриваю видео Видео полезное, наконец-то я начал лучше понимать фишку с визуальной и физической составляющей позиционирования Было сказано, что можно задавать вопросы у меня 2 вопроса, Задам сразу второй так как у меня коммент с первым вопросом удалился, из-за сслыки на codepen :( 2) У тебя должно быть есть свой порядок выхода видео Но можно видео с этим width, max-width, heiht, max-height в особенности с этими двумя width, max-width? :)
@WebDevTips
@WebDevTips 3 роки тому
Спасибо за комментарий) Можете сюда вопрос написать - t.me/webdevtips_ru
@ob7349
@ob7349 2 роки тому
да! видео по transform
@Sward66
@Sward66 2 роки тому
Так мало просмотров у такого качественного видоса
@pawa7586
@pawa7586 2 роки тому
5:39 once told me the world is gonna roll me
@alexkuzmichev9623
@alexkuzmichev9623 Рік тому
Спасибо, отличное видео. единственное осталось непонятно, при position: fixed; , вне зависимости от Position: " родителя, элемент позиционируется относительно всего окна браузера, правильно я понял? То есть в любом случае фиксируется в выбранном месте окна браузера и это не зависит от position других элементов?
@user-ps2ge3cc5r
@user-ps2ge3cc5r 2 роки тому
good
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий)
@mefistofelesfuckgood
@mefistofelesfuckgood 2 роки тому
а что по поводу position:inherit?
@pupizoid100
@pupizoid100 Рік тому
transform: translate -50% по координате X это в сторону left? А -50 % по координате Y это в сторону top?
@mihail_krash
@mihail_krash Рік тому
У меня страница сайта формируется javascript-ом динамически (createElement), и что я только не делал динамический javascript накладывается на блок position: fixed... z-index-ы не помогают, я их в динамике тоже задавал 0, но они все равно накладываются на мой блок position: fixed с максимальным z-index-ом...
@harvestharvest2103
@harvestharvest2103 2 роки тому
То есть если у нас pos fixed, то он в любом случае будет позиционироваться относительно окна браузера, не взирая на то, что у его родителя например pos absolute?
@WebDevTips
@WebDevTips 2 роки тому
Спасибо за комментарий) Да, верно.
@artas3927
@artas3927 2 роки тому
Подскажите пожалуйста, как сделать автоматическое изменение сайта? Когда Вы сохраняете проект, то страница сразу принимает новые значения
@WebDevTips
@WebDevTips 2 роки тому
Здравствуйте, конкретно в том видео я использовал расширение Live Server для VS Code
@FrankyyBalboa
@FrankyyBalboa Рік тому
Здравствуйте. Почему position fixed перекрывает родителя? Тема не раскрыта до конца.
@st0nedcreature17
@st0nedcreature17 Рік тому
Отличное видео, друг, спасибо.
@1MrAnonymous11
@1MrAnonymous11 3 роки тому
Я так понимаю у body по умолчанию relative?
@deafdeaf6348
@deafdeaf6348 2 роки тому
Здравствуйте, как быть если я за позиционировал элементы относительно окна браузера, но при масштабировании они разлетаются. Что делать в таком случае?
@WebDevTips
@WebDevTips 2 роки тому
Здравствуйте, попробуйте спозиционировать не в пикслелях, а в процентах.
@deafdeaf6348
@deafdeaf6348 2 роки тому
@@WebDevTips картинки все равно разлетаются, но в меньщих пропорциях. Но это не так критично Еще я задал главному блоку фон(тоже маленькие картинки),(у этого блока position reletive, и их я споцизионировал свойством background position. И при масштабировании они так же разлетаются.
@nelson_does
@nelson_does 2 роки тому
что нужно сделать чтоб блок не был привязан к родителю
@Emil8Angel
@Emil8Angel 2 роки тому
не делать ему position: relative. тогда он спозиционируется относительно ближайшего родителя с position: absolute или если такого не найдётся, то относительно body
@nelson_does
@nelson_does 2 роки тому
@@Emil8Angel Уже понял, спасибо)
Learn CSS Positioning Quickly With A Real World Example
8:32
Slaying The Dragon
Переглядів 550 тис.
Protect The Yacht, Keep It!
15:08
MrBeast
Переглядів 54 млн
LIVE - Парад Победы в Москве. 9 Мая 2024
2:27:56
AKIpress news
Переглядів 2,2 млн
skibidi toilet 73 (part 2)
04:15
DaFuq!?Boom!
Переглядів 31 млн
Мы играли всей семьей
00:27
Даша Боровик
Переглядів 3,3 млн
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Переглядів 1,3 млн
CSS Pseudo elements Before and After: Examples
11:55
Анна Блок
Переглядів 101 тис.
Позиционирование absolute и relative CSS
17:34
Александр Дудукало
Переглядів 4,1 тис.
300 Сайдбаров ► Как сверстать структуру сайта?
26:13
Хауди Хо™ - Просто о мире IT!
Переглядів 406 тис.
❌ Медиа-запросы не нужны, если CSS писать так
20:38
Protect The Yacht, Keep It!
15:08
MrBeast
Переглядів 54 млн