Skip to content

STACKING.md

Latest commit

 

History

History
66 lines (52 loc) · 4.76 KB

STACKING.md

File metadata and controls

66 lines (52 loc) · 4.76 KB
Raw

Стэкинг и fixed-слои hero — PDCA / ПРП

Этот документ — единственный источник правды по слоям: три fixed-элемента первого экрана, blend-режимы и обязательное правило «relative z-10 + непрозрачный фон» для всего, что идёт после hero. Открыть ПЕРЕД добавлением новой секции или любой правкой z-index. Работоспособность fixed-слоёв зависит и от режима Lenis — см. MOTION.md.

В hero-секции (первый экран) живут три fixed-элемента, которые рисуются относительно viewport и продолжают «висеть» при скролле вниз. Порядок снизу вверх — это порядок в DOM:

  • img#sky-fixed — небо-подложка во весь экран (fixed inset-0 object-cover), компонент SkyFixed.astro, рендерится в index.astro до <DenisFixed />; закреплена на всех брейкпоинтах, включая мобильный;
  • aside#denis-fixed — фото Дениса справа (fixed top-0 right-0 h-screen), md+ только;
  • img#mountain-fixed — гора в левом нижнем углу (md:fixed bottom-0 left-0), живёт внутри Hero.astro.

У всех трёх намеренно нет z-index — слои выстраиваются по DOM-order, чтобы mix-blend-difference на героике могла смешиваться с небом, горой и Денисом (blend работает только внутри одного stacking context — у body).

Гора обязана оставаться mix-blend-multiply

mountain.jpg — JPEG без альфы: гора вырезана на белом поле. Пока фоном первого экрана был чистый #FFFFFF, поле сливалось с ним само. Поверх неба (#F2F4F6 в среднем) оно проступило бы светлым прямоугольником, поэтому у картинки стоит mix-blend-multiply: умножение гасит белое до фона, а дуотон (filter: url(#mountain-duotone)) остаётся. Снимать blend нельзя — вернётся прямоугольник. Фото Дениса — PNG с альфой, ему blend не нужен.

Правило: всё, что идёт после hero — relative z-10 + непрозрачный фон

Чтобы fixed-слои не «проступали» сквозь следующие блоки, каждая секция/блок ниже hero обязан создать собственный stacking context, который их перекроет. Шаблон такой:

<section class="relative z-10 bg-bg ...">
  ...
</section>

Так уже сделаны все основные секции: #about-training (bg-panel), #video (bg-black), #examples (bg-bg), #offer-stats (фон-картинка + overlay), плюс концевой воздушный <div> после offer-stats.

Чек-лист при добавлении нового блока после hero

  1. На корневом элементе блока — relative z-10.
  2. Непрозрачный bg-* (не bg-*/NN, не прозрачный градиент без подложки). Прозрачный/полупрозрачный фон = fixed-небо, Денис и гора снова видны. Небо кроет весь экран, поэтому дыру в фоне теперь видно в любой точке блока, а не только в углах.
  3. Если блок — это просто воздух/разделитель, всё равно нужны z-10 + bg-*, иначе сквозь него «выстреливают» fixed-слои (этот баг уже ловили).
  4. Иконки/декор внутри блока с position: absolute относительно self — нормально, они в stacking context секции.

Анти-паттерны

  • <div class="h-12"> без z-10 и фона после offer-stats / любой секции.
  • Снятие z-10 с секции «для экономии» — fixed-слои сразу проступают.
  • Назначение z-index небу, Денису или горе — ломает mix-blend-difference в hero.
  • Снятие mix-blend-multiply с горы — её белое поле проступит поверх неба.