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

Поделиться
HTML-код
  • Опубликовано: 24 янв 2025

Комментарии • 110

  • @KalininaMasha
    @KalininaMasha 3 года назад +63

    Это уже наверное 15 видео которое я смотрю про позиционирование.. и теперь я с уверенностью могу сказать что я наконец поняла... Спасибо огромное!

    • @WebDevTips
      @WebDevTips  3 года назад +3

      Спасибо за комментарий)

    • @skatler5741
      @skatler5741 2 года назад

      Так нужно не только смотреть )

    • @bl00dyJS
      @bl00dyJS 2 года назад

      @@skatler5741 Согласен , без практики программирование не прогаммирование

    • @bl00dyJS
      @bl00dyJS 2 года назад

      А ты девочка , понимаю ,ситуации где девочки изучают программирование я встречаю редко , Обычно программисты это мальчики

    • @dvq8726
      @dvq8726 2 года назад +6

      @@bl00dyJS Ада Августа Лавлейс - английский математик, дочь великого английского поэта Байрона. Ада Лавлейс занималась изучением вычислительной машины Чарльза Бэббиджа. В 1843 года Ада Лавлейс оставила первую в мире программу для этой машины. Первый в мире программист. PS Возможно после этого твой мир пошатнется )))😁

  • @stass3251
    @stass3251 2 года назад +8

    Либо я тупой, либо не те уроки смотрел, но почему то ваш урок расставил все по полочкам. Спасибо!

  • @andavidov
    @andavidov Год назад +4

    Спасибо, единственный, кто нормально и доходчиво пояснил.

  • @yuriyzadorozhnyi3849
    @yuriyzadorozhnyi3849 Год назад

    Дякую за якісне і зрозуміле пояснення теми . Радий що знайшов Ваш канал де дуже багато потрібної інформації для мене початківця в цїй справі ! Щиро вдячний вам за можливість навчатися безкоштовно і що ділитеся своїми знаннями . Для початківця складно зразу за все платити , багато всього потрібно . Добре що є ще такі люди як ви , дай Вам Бог здоров'я !

  • @ЫрыскелдиСактанов
    @ЫрыскелдиСактанов 2 года назад +1

    здоровья тебе

  • @Clamator
    @Clamator 2 года назад +1

    спасибо за видео))
    на 5:39 на удержался и пропел somebody once told me.... =D

  • @dre1kke
    @dre1kke 2 года назад +1

    Мой комментарий уже будет дико неоригинален. Но я реально смотрю уже "...дцатое" видео про позиционирование, т.к. никак не могу до конца понять эту тему. Именно ЭТО видео настолько просто и легко помогло мне прекрасно понять что, как и когда делать. Просто нереально огромнейшее спасибо! С меня лайк, подписка и захлёбный просмотр остального контента (буду искать ответы на парочку таких же муторных для меня вопросов - свойство display и адаптивную верстку. Еще раз спасибо и удачи Вам!!!

  • @АкбарМирзарахимов-ю4т

    ооооо спасибо братан я вообще не пони мал теперь понимаю от души братан

  • @АлексейЮсупов-е7в

    Спасибо, незнакомый друг! Респект тебе большой!

  • @Mr-in8km
    @Mr-in8km 9 месяцев назад +1

    огромное спасибо за полезный урок с примерами

  • @prio1074
    @prio1074 Год назад

    Спасибище! Смотрел много других примеров не заходило. После этого видео наконец стало ясно.

  • @ДарьяДарья-ж9к
    @ДарьяДарья-ж9к 2 года назад +7

    Действительно толковый урок, особенно термины физическое и визуальное положение!

  • @frontend_notes
    @frontend_notes 2 года назад +1

    за примеры в конце отдельное спасибо

  • @SuperYuri009
    @SuperYuri009 3 месяца назад

    Классный и понятный урок. Спасибо.

  • @6odio9
    @6odio9 3 года назад

    спасибо чувак, лучший урок по position на этой платформе

  • @testor7627
    @testor7627 2 года назад

    Как вы мне помогли. Как раз искал, как позиционированный обьект отцентрировать на изображение. Спасибо ВАМ!

  • @AmirLT-x6y
    @AmirLT-x6y Год назад

    Thanks for the very clear examples with position. Everything became clear.

  • @ajsijushnik
    @ajsijushnik 2 года назад +1

    Отличное объяснение для position в css. Теория очень четкая с демонстрацией относительного расположения одного блока относительо других.
    Однако, когда дело дошло до реальных сайтов, как-то всё те же термины оказалось сложно отследить в общем контексте ))

  • @ЕвгенийКоупер
    @ЕвгенийКоупер 3 года назад +7

    Брат, от души спасибо. У тебя талант объяснять темы)👍

    • @WebDevTips
      @WebDevTips  3 года назад +2

      Спасибо за комментарий)

  • @АндрійЛємак
    @АндрійЛємак 2 года назад

    я в шоке, где ты был раньше,,,, я уже весь мозг сломал - вроде бы и разобрался, но на практике проблемы, а с этим видосом мой мозг все понял и физически и виртуально

    • @ProgCe
      @ProgCe Год назад

      теперь у меня проблемы с margin и padding(

    • @АндрійЛємак
      @АндрійЛємак Год назад

      @@ProgCe стандартный комент троля

  • @СаняКувалда-у4х
    @СаняКувалда-у4х 3 года назад +1

    Вопросов нет. Спасибо.

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @АлексейПопов-р7э
    @АлексейПопов-р7э 3 года назад +3

    Хороший урок, простое объяснение теории, примеры очень кстати. Спасибо огромное! Удачи!)

  • @Gazovchik
    @Gazovchik Год назад

    Всем привет
    Вроде бы нет никаких вопросов
    Автору Спасибо за Работу!

  • @one_punchmorty8140
    @one_punchmorty8140 3 года назад +3

    Спасибо тебе большое, очень доходчиво и просто! Особенно круто смотрятся примеры реальных работ!

  • @КостяСтавицкий-з5ф
    @КостяСтавицкий-з5ф 3 года назад +2

    видео просмотрел на одном дыхании, выпускай побольше обучающих видео

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @Tsvitko
    @Tsvitko 3 года назад +2

    Отлично объяснил! Спасибо большое!

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @intro_true
    @intro_true 2 года назад +2

    Спасибо за видео! Реально приблизилось 100-процентное понимание! осталось разобраться с флексами😅

  • @rikenbaker1
    @rikenbaker1 6 месяцев назад

    Спасибо за примеры.

  • @dollar4309
    @dollar4309 3 года назад +1

    сколько видео смотрел не мог понять но ты сразу четко обяснил !!!! спасибо но и продалжай так с css

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @NurikPattayaLife
    @NurikPattayaLife 2 года назад +4

    Просто шикарный урок! Прям нет слов описать всю крутость видео!!!

  • @niskofly1910
    @niskofly1910 3 года назад +3

    очень круто объясняешь, буду ждать полноценных курсов

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @nadiasierova
    @nadiasierova Год назад

    Спасибо большое за примеры на сайтах, это ооооочень помогло

  • @ВикторияРезяпкина-ж7б

    Спасибо за примеры с сайтами, намного лучше помогает понять куда применить то или иное позиционирование👍

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @astronaut1751
    @astronaut1751 3 года назад +2

    Спасибо за хорошее объяснение

    • @WebDevTips
      @WebDevTips  3 года назад +1

      Спасибо за комментарий)

    • @astronaut1751
      @astronaut1751 3 года назад

      @@WebDevTips у меня вопрос , а можно ли позиционировать текст ( к тексту добавлять абсолют и тп ) чтобы его двигать по сайту или это только к блокам ) заранее спасибо

    • @WebDevTips
      @WebDevTips  3 года назад +1

      Можно, главное обернуть текст в тег, например в параграф

  • @pawa7586
    @pawa7586 2 года назад

    5:39 once told me the world is gonna roll me

  • @alonahilbert9959
    @alonahilbert9959 2 года назад

    Дякую за відео, нарешті зрозуміла про absolute

  • @michaelmelnikov5318
    @michaelmelnikov5318 2 года назад

    Otlichno, spasibo bolshoe sa urok : )

  • @imdanteasy
    @imdanteasy 2 года назад +1

    Спасибо за видео! Быстро и понятно объяснили эту тему!

  • @tuukaaa
    @tuukaaa 2 года назад +1

    Лучший урок по данной теме. Спасибо!!!!

  • @АннаМиро
    @АннаМиро 2 года назад

    смотрю второе видеоурока про позиционирование, спасибо, все понятно)

  • @Denwork2017
    @Denwork2017 3 года назад +2

    Реально круто!!! Все просто и понятно!!! Спасибо и ждем "transform"

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @PerecNeDorogo
    @PerecNeDorogo 2 года назад

    Лайк видео и комментарий для продвижения. Это видео стоит смотреть. Очень толково и полезно! Автору огромное спасибо!

  • @Чебугена
    @Чебугена 3 года назад +1

    Броооооооо! Какая же ты умница!)))

  • @ЛопИр
    @ЛопИр 2 года назад

    Очень хороший урок спс за классный урок

  • @Gorgul
    @Gorgul 2 года назад

    Спасибо, очень наглядное объяснение

  • @sulejmanpovelitel1220
    @sulejmanpovelitel1220 2 года назад

    Хороший урок получился, все по делу без лишней воды , спасибо ! Ждем новых видео от вас

  • @aliakseipliutsinski2890
    @aliakseipliutsinski2890 Год назад

    огромное спасибо за это видео! очень помогло!!!❤

  • @denissavast
    @denissavast 2 года назад

    Огромное спасибо вам

  • @IOpeu
    @IOpeu 2 года назад

    Спасибо, друг!

  • @orazaliorazali1000
    @orazaliorazali1000 Год назад

    Благодарю!

  • @АлександрГанжа-л1у
    @АлександрГанжа-л1у 2 года назад

    Отличное видео!👏👏

  • @mikhailbykov6311
    @mikhailbykov6311 3 года назад +2

    Классный урок! Спасибо огромное!

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @kontorasb2754
    @kontorasb2754 3 года назад +5

    Спасибо за урок. Нужен урок по transform!!!!!!!

    • @WebDevTips
      @WebDevTips  3 года назад +1

      С задержкой в 5 месяцев, но видео уже на канале)

  • @dimaudovenko585
    @dimaudovenko585 2 года назад

    Спасибо!

  • @mihail_krash
    @mihail_krash 2 года назад +1

    У меня страница сайта формируется javascript-ом динамически (createElement), и что я только не делал динамический javascript накладывается на блок position: fixed... z-index-ы не помогают, я их в динамике тоже задавал 0, но они все равно накладываются на мой блок position: fixed с максимальным z-index-ом...

  • @igorbaydin
    @igorbaydin 2 года назад

    мега полезное видео!

  • @КостяСтавицкий-з5ф
    @КостяСтавицкий-з5ф 3 года назад +2

    спасибо, очень полезное видео
    😇

    • @WebDevTips
      @WebDevTips  3 года назад

      Вам спасибо за отзыв)

  • @BunnyBlood
    @BunnyBlood 2 года назад

    ты лучший друг

  • @denismaltcev3356
    @denismaltcev3356 3 года назад +1

    Спасибо бро ты про 😎

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @Чебугена
    @Чебугена 3 года назад

    Это так подробно и так по сути))

  • @paranoia-1994
    @paranoia-1994 3 года назад +2

    Вот это я понимаю уровень контента повысился,
    эканья намного меньше :) ещё и таймкоды добавил это
    очень помогает когда пересматриваю видео
    Видео полезное, наконец-то я начал лучше понимать
    фишку с визуальной и физической составляющей
    позиционирования
    Было сказано, что можно задавать вопросы у меня 2 вопроса,
    Задам сразу второй так как у меня коммент с первым вопросом удалился, из-за сслыки на codepen :(
    2) У тебя должно быть есть свой порядок выхода видео
    Но можно видео с этим width, max-width, heiht, max-height
    в особенности с этими двумя width, max-width? :)

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)
      Можете сюда вопрос написать - t.me/webdevtips_ru

  • @ob7349
    @ob7349 3 года назад

    да! видео по transform

  • @Gazon1155
    @Gazon1155 3 года назад

    Так мало просмотров у такого качественного видоса

  • @Jason_Giambi
    @Jason_Giambi 3 года назад +1

    Шикарно. Спасибо тебе большое!

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @pupizoid100
    @pupizoid100 Год назад

    transform: translate
    -50% по координате X это в сторону left? А -50 % по координате Y это в сторону top?

  • @dobrMAV
    @dobrMAV 3 года назад +1

    Спасибо за полезный урок!Сейчас учу CSS что то уже понимаю,а что то дается непросто .Будет ли продолжение уроков по CSS ?

  • @alexkuzmichev9623
    @alexkuzmichev9623 2 года назад

    Спасибо, отличное видео.
    единственное осталось непонятно, при position: fixed; , вне зависимости от Position: " родителя, элемент позиционируется относительно всего окна браузера, правильно я понял? То есть в любом случае фиксируется в выбранном месте окна браузера и это не зависит от position других элементов?

  • @FrankyyBalboa
    @FrankyyBalboa 2 года назад

    Здравствуйте.
    Почему position fixed перекрывает родителя? Тема не раскрыта до конца.

  • @ЭдгарЕдигарян-ц3ъ
    @ЭдгарЕдигарян-ц3ъ 3 года назад +1

    good

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)

  • @harvestharvest2103
    @harvestharvest2103 3 года назад +1

    То есть если у нас pos fixed, то он в любом случае будет позиционироваться относительно окна браузера, не взирая на то, что у его родителя например pos absolute?

    • @WebDevTips
      @WebDevTips  3 года назад

      Спасибо за комментарий)
      Да, верно.

  • @artas3927
    @artas3927 3 года назад

    Подскажите пожалуйста, как сделать автоматическое изменение сайта?
    Когда Вы сохраняете проект, то страница сразу принимает новые значения

    • @WebDevTips
      @WebDevTips  3 года назад

      Здравствуйте, конкретно в том видео я использовал расширение Live Server для VS Code

  • @deafdeaf6348
    @deafdeaf6348 3 года назад

    Здравствуйте, как быть если я за позиционировал элементы относительно окна браузера, но при масштабировании они разлетаются. Что делать в таком случае?

    • @WebDevTips
      @WebDevTips  3 года назад

      Здравствуйте, попробуйте спозиционировать не в пикслелях, а в процентах.

    • @deafdeaf6348
      @deafdeaf6348 3 года назад

      @@WebDevTips картинки все равно разлетаются, но в меньщих пропорциях. Но это не так критично
      Еще я задал главному блоку фон(тоже маленькие картинки),(у этого блока position reletive, и их я споцизионировал свойством background position. И при масштабировании они так же разлетаются.

  • @1MrAnonymous11
    @1MrAnonymous11 3 года назад

    Я так понимаю у body по умолчанию relative?

  • @nelson_does
    @nelson_does 2 года назад

    что нужно сделать чтоб блок не был привязан к родителю

    • @Emil8Angel
      @Emil8Angel 2 года назад

      не делать ему position: relative. тогда он спозиционируется относительно ближайшего родителя с position: absolute или если такого не найдётся, то относительно body

    • @nelson_does
      @nelson_does 2 года назад +1

      @@Emil8Angel Уже понял, спасибо)

  • @st0nedcreature17
    @st0nedcreature17 2 года назад

    Отличное видео, друг, спасибо.