Windows 10 reached EOS (end of support) on October 14, 2025. If you are on Windows 10, see this article.

Avatar for Username

Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Weitere Informationen

Dieses Thema wurde archiviert. Bitte stellen Sie eine neue Frage, wenn Sie Hilfe benötigen.

CSS position: sticky fails on a long parent

  • 4 Antworten
  • 0 haben dieses Problem
  • 370 Aufrufe
  • Letzte Antwort von Chrispink
  • Gelöst

Chrispink
Chrispink

MacOS 14.6.1 Firefox 31.0.3 (aarch64)

I have a long (19000px) table with a sticky row at the top. On Safari or Chrome it works fine. On Firefox it works for around 800 px and then becomes 'unsticky'.

Is this a known behaviour?

MacOS 14.6.1 Firefox 31.0.3 (aarch64) I have a long (19000px) table with a sticky row at the top. On Safari or Chrome it works fine. On Firefox it works for around 800 px and then becomes 'unsticky'. Is this a known behaviour?

Ausgewählte Lösung

I did pick up one thing from your codepen which has resolved the issue. It's a question of the semantic markup. If I wrap the header rows in <thead> then the sticky behaves correctly. (although removing this doesn't break the codepen). I'm happy with that as correct semantics is never a bad thing ;-)

Thanks again

Diese Antwort im Kontext lesen 👍 2

Alle Antworten (4)

Chrispink
Chrispink Fragesteller

I can't edit the original but it looks strongly like it works for one viewport height.

TyDraniu
TyDraniu
  • Top 10 Contributor

Is it something like this testcase? https://codepen.io/brandonmcconnell/pen/ZEZaozw/5952a63864a7d7167c788cec6e03b487

Chrispink
Chrispink Fragesteller

No, this works perfectly (even if I duplicate the rows). Although the structure and CSS are very similar.

So the issue is somewhere else or more complicated.

I will try and duplicate my situation in a codepen. At the moment it's in a private part of a website.

Thank you for the help.

Chrispink
Chrispink Fragesteller

Ausgewählte Lösung

I did pick up one thing from your codepen which has resolved the issue. It's a question of the semantic markup. If I wrap the header rows in <thead> then the sticky behaves correctly. (although removing this doesn't break the codepen). I'm happy with that as correct semantics is never a bad thing ;-)

Thanks again