CSS3 #8 Единицы, переполнение и уровни элементов (Units, Overflow & z-index)

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 พ.ย. 2024

ความคิดเห็น • 42

  • @HIghtowerSever
    @HIghtowerSever 3 ปีที่แล้ว +19

    Классно ты объясняешь... интонация, темп, паузы... Продолжай!

  • @shifronim8950
    @shifronim8950 3 ปีที่แล้ว +6

    Для z-index гуглите в MDN контекст наложения, он же stacking context. Вкратце - родителям одинакового уровня вложенности можно явно задать z-index и дети тогда будут конкурировать только внутри родителя, ограниченные его "стеклянным потолком" - его z-index

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว

      👍 спасибо за конкретизацию кейса

    • @novikov-pavel
      @novikov-pavel 2 ปีที่แล้ว +1

      Для меня было сюрпризом, что z-index работает только на 1 уровне вложенности)))
      Уже рвал волосы на голове, не понимая почему у меня не выходит))

  • @AmirLT-x6y
    @AmirLT-x6y ปีที่แล้ว

    🥳I understood. Very interesting and useful lesson💯

  • @olehyefimenko6693
    @olehyefimenko6693 2 ปีที่แล้ว

    Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 ปีที่แล้ว

      Спасибо за поддержку

  • @vovathemonster
    @vovathemonster 2 ปีที่แล้ว +1

    Хороший контент, спасибо

  • @МаксимПолонец-м3ц
    @МаксимПолонец-м3ц 2 ปีที่แล้ว

    Супер'

  • @missisipi9992
    @missisipi9992 ปีที่แล้ว

    Good!

  • @liviivi
    @liviivi 2 ปีที่แล้ว

    Спасибо за урок! Подскажите, в каких ситуациях невозможно применить min-hight для модального окна?

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 ปีที่แล้ว +1

      Ну например, если вы хотите сделать анимацию увеличения высоты модалки от нуля, до какого-то значения

    • @liviivi
      @liviivi 2 ปีที่แล้ว

      @@YauhenKavalchuk спасибо!

  • @calavera-skull
    @calavera-skull 3 ปีที่แล้ว +1

    Единственный вопрос, почему для задания размеров элементов и отступов обычно используют абсолютные величины? А если мы говорим об адаптивной вёрстке? Гораздо чаще встречаются %, как мне кажется. Да и rem очень многие используют. Px вообще такое себе.

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว +2

      Даже адаптивная вёрстка отталкивается от сеток, где отступы задаются пикселями, а основной размер процентами. Так что всё-таки пиксель даже для адаптивной используется чаще

  • @Олег-и7ц6о
    @Олег-и7ц6о ปีที่แล้ว +1

    почему calc(100px + 200px + 1rem) будет 310? если 1rem = 16px? должно получиться 316px
    это просто оговорка или я что-то недопонял?)

    • @AmirLT-x6y
      @AmirLT-x6y ปีที่แล้ว

      тоже заметила🤔🤔🤔

  • @kspshnik
    @kspshnik 3 ปีที่แล้ว +1

    1. Было бы здорово упомянуть, что 100vw _не_ учитывает полосы прокрутки, то есть если высота контента больше 100vh, то вылезет горизонтальный скролл
    2. А куда ellipsis-то делся?

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว +1

      А зачем это упомянуть? Скролл появляется не в HTML документе, а в браузере. И к видимой области экрана вообще отношения не имеет. Определение для вьюпорта я озвучил очень чётко. И что вы имеете ввиду под ellipsis (это text-overflow: ellipsis;)? Если да, то это будет в теме работы с текстом.

    • @kspshnik
      @kspshnik 3 ปีที่แล้ว +2

      @@YauhenKavalchuk про ellipsis понял, слегка вперёд забежал :)
      А вот с тем, что "скролл появляется не в документе, а в браузере" - не согласен. Мы _всё_ делаем чтобы оно появилось в браузере.
      Просто эту фишку надо в голову положить внимательно, чтобы знали, иначе потом будут непонятные и необъяснимые косяки, и люди будут биться об эту стенку головой.

  • @FredUA
    @FredUA 3 ปีที่แล้ว

    тема z-index не раскрыта)) Про контекст забыл, а ведь вопрос как поднять вложенный элемент, что бы перебить z-index элементов, которые на одном уровне с родительским, возникает на первой верстке всяких там мобильных меню, модалок и т.д.

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว +2

      Согласен, можно было дать чуть глубже, но основы всё-таки разобраны

  • @bekmuraduralov2805
    @bekmuraduralov2805 3 ปีที่แล้ว +2

    Почему доступ к остальным видосам ограничен?

    • @ПанЧиЛо
      @ПанЧиЛо 3 ปีที่แล้ว +3

      Каждую неделю открывается доступ к двум видео из курса. Сделано это для того, чтобы у автора было время для работы над следующим курсом, а также для поддержания статистики просмотров. Если хочется посмотреть курс заранее, его можно приобрести за 3000 рублей. Довольно демократичная цена, если смотреть на ценники курсов у других блоггеров

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว +1

      @Пан Чи Ло, спасибо за помощь!

  • @vadim.islamov
    @vadim.islamov ปีที่แล้ว

    а, какой размер руки имеешь?

    • @YauhenKavalchuk
      @YauhenKavalchuk  ปีที่แล้ว

      Что-то я не понял вопроса

  • @Oktan241
    @Oktan241 3 ปีที่แล้ว

    а если вместо вьюпорта использовать 100% разве оно точно так же не займет всю область экрана?

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว +2

      Можете попробовать и посмотреть что будет. Как вариант, начните именно с высоты)

    • @Oktan241
      @Oktan241 3 ปีที่แล้ว

      @@YauhenKavalchuk высота и не работает...

  • @kspshnik
    @kspshnik 3 ปีที่แล้ว

    А что, :root уже отменили? ;)

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว

      А при чём здесь root? Это вообще больше даже относится к псевдоклассам.

    • @kspshnik
      @kspshnik 3 ปีที่แล้ว

      @@YauhenKavalchuk к сказанному, что стилизация по тэгу html - _единственный_ способ повлиять на rem. Это не так, rem можно изменить ещё и определив font-size для :root ;o)
      (да, я знаю, что по сути это одно и тоже, и :root - это (псевдо)класс, _всегда_ "висящий" на html ;-), но формально - это два разных метода сделать одно и то же. Я например терпеть ненавижу селекторы по тэгу применять)

    • @missisipi9992
      @missisipi9992 ปีที่แล้ว

      @@kspshnik видимо автор дал тебе возможность самостоятельно разобраться в этом вопросе)

  • @arman-6172
    @arman-6172 ปีที่แล้ว

    Мне кажется для em кривая формулировка вышла 🤔

    • @YauhenKavalchuk
      @YauhenKavalchuk  ปีที่แล้ว

      Никто не жаловался🤷‍♂️

    • @arman-6172
      @arman-6172 ปีที่แล้ว

      ​@@YauhenKavalchuk em - это текущий размер шрифта родителя. В два раза больше получилось т.к. указали 2em. Тож самое можно было сказать про проценты указав 200%. Или ошибаюсь?)