Verhindern Sie, dass das Element über die Position des festen Elements gescrollt wird ⇐ CSS

[Anonymous]

Das Problem ist wie folgt:

• ein Header-Element, das an seiner Position fixiert ist
• der Container in Rot befindet sich unter dem Header mit einer Polsterung oben
• das orange Kind verhält sich wie erwartet, es scrollt nach unten
• das hellgrüne Kind verhält sich ebenfalls wie erwartet
• aber das blaugrüne untergeordnete Element darin scrollt über den Header

Wie kann ich dieses Verhalten beheben, ohne Z-Index zu verwenden?
Ich habe bereits versucht, Translate-z: 10px zu verwenden, um den Header über alle Elemente anzuheben, aber das hat nicht funktioniert.
Über das Translate-z-0, dies muss ich tun, um das Stapelverhalten der Rasterelemente zu ordnen (die anderen Geschwister werden zur Vereinfachung weggelassen). Wenn diese das Problem verursachen, teilen Sie mir bitte mit, wie ich die Stapelung ohne Übersetzung bestellen kann.

Code: Select all

/*! 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;
}

Code: Select all

Fixed header to be scrolled under




scrolled under




scrolled over