Урок 10. Задания

Задание 1. Аватар со статусом

Круглый аватар 48px, в правом нижнем углу — зелёная точка 12px с белой обводкой. Точка должна немного выходить за границу аватара.

Задание 2. Липкий заголовок раздела

Внутри прокручиваемого блока высотой 200px сделайте заголовок, который прилипает к верху при прокрутке и не перекрывается содержимым.

Задание 3. Найти причину

Подсказка внутри карточки обрезается по её краю. Объясните почему и предложите два способа исправления.

<div class="overflow-hidden rounded-xl border">
  <div class="relative">
    <button>?</button>
    <span class="absolute -top-8">Подсказка</span>
  </div>
</div>

Вопрос 1

Относительно чего позиционируется элемент с absolute?

Вопрос 2

Что нужно добавить к sticky, чтобы он работал?

Вопрос 3

Почему z-50 иногда не поднимает элемент выше соседей?

Вопрос 4

Как показать широкую таблицу на мобильном?