Запретить прокрутку элемента над фиксированным элементом позиции ⇐ CSS

[Anonymous]

Проблема в следующем:

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

Как я могу исправить это поведение без использования z-index?
Я уже пытался использовать Translate-Z: 10px, чтобы поднять заголовок над всеми элементами, но это не сработало.
Что касается перевода-z-0, это мне нужно заказать поведение наложения элементов сетки (остальные одноуровневые элементы опущены, чтобы упростить задачу). Если это вызывает проблему, сообщите мне, как я могу упорядочить штабелирование без перевода.

Код: Выделить всё

/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;

@layer base {

*,
::after,
::before,
::backdrop,
::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}

}

@layer theme {

:root,
:host {
--spacing: 0.25rem;
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
}

@layer utilities {
.fixed {
position: fixed;
}

.mb-50 {
margin-bottom: calc(var(--spacing) * 50);
}

.flex {
display: flex;
}

.h-16 {
height: calc(var(--spacing) * 16);
}

.h-80 {
height: calc(var(--spacing) * 80);
}

.min-h-160 {
min-height: calc(var(--spacing) * 160);
}

.w-full {
width: 100%;
}

.-translate-x-\[0\%\] {
--tw-translate-x: calc(0% * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}

.translate-z-0 {
--tw-translate-z: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
}

.overflow-hidden {
overflow: hidden;
}

.bg-amber-600 {
background-color: oklch(66.6% 0.179 58.318);
}

.bg-gray-800 {
background-color: oklch(27.8% 0.033 256.848);
}

.bg-green-200 {
background-color: oklch(92.5% 0.084 155.995);
}

.bg-red-400 {
background-color: oklch(70.4% 0.191 22.216);
}

.bg-teal-400 {
background-color: oklch(77.7% 0.152 181.912);
}

.pt-30 {
padding-top: calc(var(--spacing) * 30);
}

.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
}

@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}

@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}

@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}

Код: Выделить всё

Fixed header to be scrolled under




scrolled under




scrolled over

Подробнее здесь: https://stackoverflow.com/questions/797 ... ed-element