Linuchs: position:sticky funktioniert nicht

problematische Seite

Moin,

bisher habe ich position:sticky nur auf thead angewendet. Bleibt zwar am oberen Rand des viewport stehen, wird aber transparent (Firefox), kann man kaum lesen, wenn die Tabellenzeilen darunter sind.

Nun möchte ich einen Absatz <p> sticky machen, nämlich das Datum für folgende Veranstaltungen. Die Angabe wird ignoriert, <p> wird weggescrollt.

<p style="margin-top:1em;position: sticky;"><b><span>Mittwoch, 02.09.2020</span></b></p>
<p>18:00 ...</p>
<p>20:00 ...</p>

Woran liegt das?

Linuchs

akzeptierte Antworten

  1. problematische Seite

    Hallo,

    bisher habe ich position:sticky nur auf thead angewendet. Bleibt zwar am oberen Rand des viewport stehen, wird aber transparent (Firefox), kann man kaum lesen, wenn die Tabellenzeilen darunter sind.

    bei mir nicht.

    Gruß
    Jürgen

    1. problematische Seite

      Du wendest sticky auf einen Tabellenkopf an. Ich aber habe keine Tabelle und konnte in den Dokumentationen diese Bedingung nicht finden.

      Linuchs

      1. problematische Seite

        Hallo

        ok, dann habe ich

        bisher habe ich position:sticky nur auf thead angewendet. Bleibt zwar am oberen Rand des viewport stehen, wird aber transparent (Firefox), kann man kaum lesen, wenn die Tabellenzeilen darunter sind.

        falsch verstanden.

        Ich schließe mich Martins Vorschlag an.

        Gruß
        Jürgen

  2. problematische Seite

    Hallo,

    bisher habe ich position:sticky nur auf thead angewendet. Bleibt zwar am oberen Rand des viewport stehen, wird aber transparent (Firefox), kann man kaum lesen, wenn die Tabellenzeilen darunter sind.

    dann gib den td- oder th-Elementen eine Hintergrundfarbe. Fixed.

    Nun möchte ich einen Absatz <p> sticky machen, nämlich das Datum für folgende Veranstaltungen. Die Angabe wird ignoriert, <p> wird weggescrollt.

    <p style="margin-top:1em;position: sticky;"><b><span>Mittwoch, 02.09.2020</span></b></p>
    <p>18:00 ...</p>
    <p>20:00 ...</p>
    

    Du ordnst zwar sticky an, aber ohne Positionsangabe.

    Live long and pros healthy,
     Martin

    --
    Home is where my beer is.
    1. problematische Seite

      Hallo Martin,

      ich korrigiere mich: Der <thead> ist vermutlich nicht transparent, sondern <tbody> schiebt sich drüber. Braucht thead ein z-index?

      table.liste thead {
          position: sticky;
          top: 5px;
          background-color: #fe0;
      }
      

      Du ordnst zwar sticky an, aber ohne Positionsangabe.

      Danke, der Tipp war's.

      Linuchs

      1. problematische Seite

        Hi,

        ich korrigiere mich: Der <thead> ist vermutlich nicht transparent

        soweit ich weiß, ignorieren die Elemente thead, tbody und tfoot so einige visuelle Eigenschaften, weil sie nur zur strukturellen Auszeichnung da sind.

        sondern <tbody> schiebt sich drüber. Braucht thead ein z-index?

        Nicht dass ich wüsste. Aber ich habe auch vor einiger Zeit irgendwo ein "Kochrezept" für Tabellen mit feststehender Kopfzeile gelesen, wo betont wurde, dass man sticky nicht auf thead anwenden sollte, sondern auf die darin enthaltenen th. Zusätzlich, so der Autor dieses Rezepts, brauche die Tabelle selbst noch ein position:relative. Die genaue Erklärung habe ich aber nicht mehr im Kopf.

        Für deinen Fall also:

        table.liste
         { position: relative;
         }
        table.liste thead th
         { position: sticky;
           top: 5px;
           background-color: #fe0;
         }
        

        Du ordnst zwar sticky an, aber ohne Positionsangabe.

        Danke, der Tipp war's.

        De nada. Das ist so ähnlich wie: "Geh bloß nicht näher ran!" - "Woran?"

        Live long and pros healthy,
         Martin

        --
        Home is where my beer is.
        1. problematische Seite

          Hallo Martin,

          warum verlinke ich eigentlich eine scrollbare Tabelle 😟.

          Gruß
          Jürgen

          1. problematische Seite

            n'Abend Jürgen,

            warum verlinke ich eigentlich eine scrollbare Tabelle 😟.

            als Beweis, dass es geht? - Immerhin präsentierst du auch nur eine Lösung, aber nicht die Erklärung, warum es so funktioniert (und anders möglicherweise nicht).

            Live long and pros healthy,
             Martin

            --
            Home is where my beer is.
            1. problematische Seite

              Hallo Martin,

              bisher hat niemand danach gefragt. Wir haben das vor geraumer Zeit (2 Jahre?) mal hier diskutiert und ich habe dann meinen Entwurf daraus gebaut. Getestet in Safari, MasOS FF, Windows FF, Windows Chrome, alter und neuer Edge, IOS-Safari und "irgendein" Android-Browser.

              Gruß
              Jürgen

        2. problematische Seite

          @@Der Martin

          soweit ich weiß, ignorieren die Elemente thead, tbody und tfoot so einige visuelle Eigenschaften, weil sie nur zur strukturellen Auszeichnung da sind.

          ??

          Alle HTML-Elemente sind „nur“ zur strukturellen Auszeichnung da.

          Dass thead, tbody und tfoot so einige CSS-Eigenschaften ignorieren, liegt daran, dass die Chromium-Entwickler ihre Prioritäten anders setzen als ihre Browserbugs zu fixen.

          In Firefox funktioniert das nämlich.

          😷 LLAP

          --
          „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin