Как позиционировать элементы на сайте | CSS позиционирование

Поделиться
HTML-код
  • Опубликовано: 14 июл 2021
  • Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to/4100118065342340
    Позиционирование элементов на сайте - одна из главных болей любого начинающего (и не только) разработчика. Действительно, поначалу очень трудно сориентироваться во всём том, что касается позиционирования элементов на странице относительно друг друга.
    В этом видео я объясняю на чём строится всё позиционирование и о некоторых нюансах позиционирования с помощью position relative и absolute.
    Сам я, когда начинал всё это дело изучать (в 2015 году), тоже долго не мог "допереть" до всего этого. Но в реале оказалось, что всё куда проще, чем я думал. Об этом и поговорим :)
    ========================================
    avis-agency.ru - создание сайтов под ключ
    rah-emil.ru - мой сайт и соц. сети
    ========================================
    Рекомендую вам к прочтению следующие ссылки (это точно вам поможет):
    1) Отступы и поля: webref.ru/css/type/margin
    2) Позиционирование: webref.ru/css/type/position
    3) Размеры: webref.ru/css/type/size
    4) Флексы: webref.ru/css/type/flex
    Читайте, практикуйтесь, и сверстаете что угодно. Позиционирование будет даваться вам очень легко.

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

  • @ZXChaszer
    @ZXChaszer Год назад +1

    Хороший видос, понял то что долго искал и не мог найти. Теперь будет легче позиционировать элементы на начальной стадии изучения))

  • @Maifun1
    @Maifun1 2 года назад +17

    Огромнейшее тебе человеческое ЗУР РАХМЭТ!!!! Видео было очень полезным. До этого, просматривал мануалы по верстке, все про позиционирование говорили вскользь. Здесь все четко, лаконично и понятно. Да, тема не раскрыта до мелочей, но база очень хорошая, без которой пиздец как сложно

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

      Да если до мелочей раскрывать, то видео шло бы больше часа😇
      Я хотел дать общее понимание как можно позиционировать)
      Спасибо!)

  • @tatyanaorci8483
    @tatyanaorci8483 11 месяцев назад

    Огромное человеческое СПАСИБО!!!! Все четко и по делу!

  • @RosemaryCats
    @RosemaryCats 11 месяцев назад

    Вставки топ 😂 спасибо за видео)

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

    Очень полезная и понятная информация, спасибо!

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

    Спасибо,было интересно и максимально понятно,удачи тебе))))

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

    Наконец-то!!!! Не монотонное и скучное видео! Интересно, автору респект, делайте больше видео!

  • @weekendshow7567
    @weekendshow7567 Месяц назад

    Хорошее объяснение за 2 минуты❤

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

    спасибо, доступным, понятным языком обьяснение)

  • @user-or9zj5wg6t
    @user-or9zj5wg6t 2 года назад +6

    Вставки Топ👍 Нихуя не понял, но очень интересно..

  • @MichaelKrasko-zi1db
    @MichaelKrasko-zi1db Год назад

    Спасибо, было полезно!

  • @rustammusapirov9844
    @rustammusapirov9844 11 месяцев назад

    Ты красавчик, было полезно брат

  • @user-pe7dz5xg7v
    @user-pe7dz5xg7v Год назад

    От души дружище, спас!

  • @user-iw7mj1ci5e
    @user-iw7mj1ci5e 10 месяцев назад

    Ааааааааааа!! Вот оно че. Наконец таки дошло, как пазл в голове собрался. И читала об этом и видео смотрела, нихера не было понятно. А тут прям ИНСАЙТ 👀🤣Спасибо

  • @user-ll4tk2kn9i
    @user-ll4tk2kn9i Год назад

    Помог, большое спасибо!

  • @fuadmamedov800
    @fuadmamedov800 2 месяца назад

    спс огромное!

  • @user-xu4ob9pg7e
    @user-xu4ob9pg7e 8 месяцев назад

    полезная инфа, спасибо

  • @firedemon5791
    @firedemon5791 Год назад +1

    у меня появилась проблема. Я создал div с pos:realtive, а в нем с absolute, для того чтобы наложить картинки друг на друга. после создал еще 1 div (вне прошлого) и он оказался позади первого. Что в этом случае делать?🤔

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

    прям в тему брат спасибо

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

      @@AVISTV Мелкие вопросы, которые можно найти в гугле, а так) интерес вызывают анимации на js , css , на css более все понятно, но вот js просто как книга на китайском :D А так отличные видео, все очень понятно и с юмором )

  • @user-ii2gq5ki1u
    @user-ii2gq5ki1u 2 года назад

    здорово, спасибо

  • @user-du3iq3wl1w
    @user-du3iq3wl1w Год назад

    Спасибо большое за видео! Скажите, пожалуйста, можно ли позиционировать элементы не с помощью relative и absolute, а чего-то другого, более адаптивного? А то у меня получается прямо так, как вы и сказали: когда выбираю другой гаджет, то что задано с помощью relative и absolute плывет. Не могу найти инфо, как это исправить или чем заменить. Один из примеров, где я применила position relative и absolute, это заголовок (position relative), в котором под некоторыми словами идет подчеркивание, как мазок кистью (position absolute). Подскажите, пожалуйста, как быть.

  • @mihail_krash
    @mihail_krash Год назад +1

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

  • @cossackcortes
    @cossackcortes 11 месяцев назад +2

    Я хочу знать CSS и HTML для работы с онлайн-баннерами, фирмы это требуют. Есть ли смысл пройти платный курс Фронтенд (CSS+HTML+Java) или есть путь полегче? Что именно нужно освоить для работы с онлайн-баннерами?

  • @romanpit4you361
    @romanpit4you361 8 месяцев назад

    Спасибо большое, да позиционирование не сразу дается. С видео, чутка прояснилась ситуация)

  • @user-kn1fo9so3m
    @user-kn1fo9so3m 9 месяцев назад

    Спасибо!

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

    Привет, у меня проблема: сверстал header, а при масштабировании он съезжает по горизонту вправо, при этом контейнер указан в пределах интро.

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

    Спасибо за объяснение позиционирования, а то я все думал толи лыжи не едут?

  • @sofers2069
    @sofers2069 7 месяцев назад

    И правда крутой видос

  • @user-yw1si2mb8l
    @user-yw1si2mb8l 2 года назад +1

    Красавчик более понятнее я еще не видел обьеснения .большой стаж у тебя ????#ccs#html.чисто от души тебе !

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

    Я не услышал, но вроде ты не сказал что absolute клеится либо к глобальному окну, либо к родителю

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

    Эхх не написал про Position fixed )) Но видос топ

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

    На сайте нельзя располагать 2 и более релетива? Если можно тогда как идет их порядок? У меня путается все))

  • @user-hb6gb7ck5u
    @user-hb6gb7ck5u 2 года назад +1

    Доброго времени суток. Хотелось бы увидеть от вас видео по Адаптивному Web дизайну.

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

      Я буду выпускать видео по Figma и некоторым лайфхакам😜

    • @user-hb6gb7ck5u
      @user-hb6gb7ck5u 2 года назад

      @@rah_emil на чистом CSS или при помощи Flex и Grid?

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

      @@user-hb6gb7ck5u да конечно)

  • @sladkaia_vita3864
    @sladkaia_vita3864 8 месяцев назад

    А что с флекбоксами Карл?

  • @13babyearth
    @13babyearth Год назад

    Некоторое понимание пришло

  • @veryxcc
    @veryxcc 7 месяцев назад +2

    Это нормально если я вот учу месяца 2 html и css и верстаю уже впринцыпи знаю что как но получается чучуть кривовато на адптиве

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

      гриды и флексы учи

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

    вопрос не по теме, как загрузить псд макет который открывается в фотошопе в фигму?

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

      Абсолютно не по теме🤣
      Насколько МНЕ известно - никак. Поищи на всякий инфу в интернете, как любой нормальный человек)))

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

    За папаню лайк

  • @arthurgritsishin3164
    @arthurgritsishin3164 10 месяцев назад

    Что значит ощущается на странице?! с абсолютным позиционированием блок выпадает из DOM дерева элементов

  • @user-dn8up5jp9t
    @user-dn8up5jp9t Год назад

    Как по центру всё это размещать? Где тут место для flexов?

  • @user-or9zj5wg6t
    @user-or9zj5wg6t 2 года назад

    Объясни, пожалуйста, Я начинающий недо - верстальщик. Верстаю блоки. Хедер, слева сайд, контент. Ставлю обтекание через флоат и в блоке контент вводу два предложения и футер прижимает блок контент, хотя надо чтобы он был внизу страницы. Плиз помоги, с меня подписка, лайк и что ещё пожелаешь ...☝️

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

    Самое подробное объяснение z-index!!!

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

      @@AVISTV без)) нигде не видела, чтобы его объясняли в связке с position, спасибо!

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

      @@AVISTV эт мы все тут знаем) что нашли золотого человека )) спасибо, правда

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

    Позишн релатив = позизионирование согласно родителя ,это понятно(нет). Он что принимает координаты родителя? Или становится рядышком?? Я видел как создаются сложные конструкции благодаря этому тегу,но что он именно означает я так и не смог понять. Может ты мне "разжуешь" этот вопрос?=)

  • @aleksandrzanachkin2601
    @aleksandrzanachkin2601 Год назад +1

    а что будет если два аблослютных будут друг за другом? или относительных, а если внутри или разные, не понятно логика их поведения. Во всех видео просто набор примеров.

  • @Tornado-ln7fq
    @Tornado-ln7fq Год назад +1

    Да что тут размусоливать .
    Margin - применяется для задания отступов блоков div(Элементы которые имеют строго свойства block),они все внешние!
    Padding - применяется для задания отступов внутри блоков,внимания "Контента"(текст,картинка,span элементы).
    Absolute position - Используют для создания элементов ,которые не будет учитываться пересчет размеров на страницы(Кнопка вверх,меню,бап табличка).
    Вот только не кто не придерживается этих правил,от туда и бардак.

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

    Я суровно не понял. Мне нужно чтоб в виде кода объяснили походу. Вот просто как мне разместить кнопку сверху-справо спомосщь css. По центру и посередине справо

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

      У меня есть другие практические уроки)
      Рекомендую курс, где мы делаем UI библиотеку

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

      position: absolute;
      top:
      left:
      Играй с топом и лефтом пока не устроит

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

      @@JeroenMarsh я так и делаю, но при малейшем изменении сайта (будь то разрешение,телефон,планшет) всё идёт по пизде. Поэтому надо что то другие

  • @HackerokPRO
    @HackerokPRO 4 месяца назад

    Чувак ну просто нереально смотреть, зачем ты эту басуху на фон поставил!

    • @AVISTV
      @AVISTV  4 месяца назад

      Потом сделал тише, в новых видосах)))

  • @user-fd9qf2nh8z
    @user-fd9qf2nh8z 10 месяцев назад

    я гашусь в туз з обезянками мне ставить div?

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

      с классом monkey__ochko

  • @user-vg5oi6mg4z
    @user-vg5oi6mg4z 7 месяцев назад

    Спасибо , но как размещать обьекты так и не обьяснил

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

    Забыл про fixed и sticky рассказать

  • @404piano
    @404piano 2 года назад +1

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

    • @user-qm1cw5eo6v
      @user-qm1cw5eo6v 2 года назад

      вёрстка куда логичнее чем к примеру js с своими функциями. php пайтон понятные а жаскрипт мне очень не нравится,

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

      полно конструкторов, начиная с тильды и так далее, только расставляй блоки как нравиться и сайт готов

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

      @@AVISTV Фу не фу, а миллионы сайтов на конструкторах сделаны и куча разработчиков сайтов html и css ни когда в глаза не видели.

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

      @@AVISTV Автору топика проблемно писать код, поэтому он спрашивал про альтернативу. Например тебе нужна куртка, от модного ателье за хуильон будет сидеть как влитая, вопрос нужна ли ему такая или лучше с рынка китайскую взять и она будет выполнять те же функции. А вообще это вопрос халиварный

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

    Я как полный новичок вообще ничего не поняла 😢

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

    Вещи делаешь

  • @dogvscatfunny9956
    @dogvscatfunny9956 2 месяца назад

    Это всегда легко на подобных примерах показывать,на деле это не работает,контент смещается по не понятным причинам,а если это будет фоновая картина тогда все будет очень сложно.

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

    видео без практики жаль

  • @user-no5re7vc3b
    @user-no5re7vc3b 8 месяцев назад

    Ниче не понял

    • @AVISTV
      @AVISTV  8 месяцев назад

      Жаль