Verwenden von Position klebrig mit CSS Grid

    <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">

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!