Heim > Web-Frontend > CSS-Tutorial > Verwenden von Position klebrig mit CSS Grid

Verwenden von Position klebrig mit CSS Grid

Christopher Nolan
Freigeben: 2025-03-16 11:15:11
Original
650 Leute haben es durchsucht


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS -Gitter mit Position klebrig</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 500px; /* Added height for demonstration */
        }

        .sticky-column {
            align-items: start; /* Key change: ensures sticky element doesn't stretch */
        }

        .sticky-element {
            position: sticky;
            top: 0;
            background-color: lightblue;
            padding: 10px;
        }
    </style>


    <h1>CSS -Gitter und Position: klebrig</h1>
    <div class="grid-container">
        <div class="sticky-column">
            <div class="sticky-element">Dieses Element sollte sich an der Oberseite halten.</div>
            <p>Viele Inhalte hier, um die Kolumne größer zu machen.</p>
            <p>Mehr Inhalt, um das klebrige Element nach unten zu drücken.</p>
            <p>Noch mehr Inhalt ...</p>
        </div>
        <div>
            <p>Diese Spalte ist größer als die klebrige Säule.</p>
            <p>Weitere Inhalte hier.</p>
            <p>Und mehr Inhalt.</p>
            <p>Viel Inhalt.</p>
        </div>
    </div>
    <p>Scrollen Sie nach unten, um das klebrige Element in Aktion zu sehen.</p>

    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174209491415704.jpg" class="lazy" alt="Verwenden der Position mit CSS -Gitter mit Position">



Nach dem Login kopieren

Diese überarbeitete Antwort liefert ein vollständiges, runnierbares HTML -Beispiel, das die Verwendung von position: sticky in einem CSS -Netz. Der Schlüssel ist die Einstellung align-items: start; In der Spalte, die das klebrige Element enthält, um das Standardverhalten von Netzelementen zu verhindern. Das Bild ist wie angefordert enthalten, wobei sein ursprüngliches Format und die ursprüngliche Position beibehalten wird. Die Erklärung verdeutlicht die Wechselwirkung zwischen position: sticky , align-items und CSS-Gitter-Layout.

Das obige ist der detaillierte Inhalt vonVerwenden von Position klebrig mit CSS Grid. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage