Урок 10. Решения

📁 Раздел: Раскладка ⏱️ Время изучения: ~45 мин 🎯 Сложность: Средняя

⚡ Кратко

Разбор трёх заданий, включая две причины обрезанной подсказки.

Решение задания 1

<div class="relative inline-block">
  <div class="size-12 rounded-full bg-slate-300"></div>
  <span class="absolute right-0 bottom-0 size-3 rounded-full border-2 border-white bg-emerald-500"></span>
</div>

Почему так: точка позиционируется от аватара, потому что у обёртки стоит relative. Белая рамка отделяет её от фона аватара — тот же приём, что в группе аватаров из урока 07.

Решение задания 2

Раздел «Документы»

  • Файл 1
  • Файл 2
  • Файл 3
  • Файл 4
  • Файл 5
  • Файл 6
  • Файл 7
<div class="h-48 overflow-y-auto rounded-lg border border-slate-200">
  <h3 class="sticky top-0 z-10 border-b border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-900">Раздел «Документы»</h3>
  <ul class="divide-y divide-slate-100 text-sm text-slate-700">
    <li class="px-4 py-2">Файл 1</li><li class="px-4 py-2">Файл 2</li>
    <li class="px-4 py-2">Файл 3</li><li class="px-4 py-2">Файл 4</li>
    <li class="px-4 py-2">Файл 5</li><li class="px-4 py-2">Файл 6</li>
    <li class="px-4 py-2">Файл 7</li>
  </ul>
</div>

Почему так: прокрутка живёт у контейнера с overflow-y-auto, а заголовок липнет к его верху. Непрозрачный фон и z-10 нужны, чтобы строки не просвечивали сквозь заголовок.

Решение задания 3

Подсказка обрезается, потому что у внешней карточки стоит overflow-hidden — он обрезает всё, что выходит за её границы, включая абсолютные элементы.

Способ 1: убрать overflow-hidden у карточки, если он не нужен для скругления содержимого.

Способ 2: расположить подсказку внутри области карточки — например, снизу от кнопки, а не сверху:

Подсказка внутри карточки 
<div class="overflow-hidden rounded-xl border border-slate-200 bg-white p-4">
  <div class="group relative inline-block">
    <button class="rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-700">?</button>
    <span class="pointer-events-none absolute top-full left-0 mt-2 rounded-md bg-slate-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100">
      Подсказка внутри карточки
    </span>
  </div>
</div>

Способ 3 (правильный для больших интерфейсов): рисовать подсказку через портал вне карточки — так делают библиотеки компонентов.