Menggunakan kedudukan melekat dengan grid CSS

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid CSS dengan kedudukan melekit</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>Grid dan kedudukan CSS: melekit</h1>
    <div class="grid-container">
        <div class="sticky-column">
            <div class="sticky-element">Unsur ini harus melekat pada bahagian atas.</div>
            <p>Banyak kandungan di sini untuk menjadikan lajur lebih tinggi.</p>
            <p>Lebih banyak kandungan untuk menolak elemen melekit ke bawah.</p>
            <p>Lebih banyak kandungan ...</p>
        </div>
        <div>
            <p>Lajur ini lebih tinggi daripada lajur melekit.</p>
            <p>Lebih banyak kandungan di sini.</p>
            <p>Dan lebih banyak kandungan.</p>
            <p>Banyak dan banyak kandungan.</p>
        </div>
    </div>
    <p>Tatal ke bawah untuk melihat elemen melekit dalam tindakan.</p>

    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174209491415704.jpg" class="lazy" alt="Menggunakan kedudukan melekat dengan grid CSS">

Tanggapan yang disemak ini memberikan contoh HTML yang lengkap dan lengkap yang menunjukkan penggunaan position: sticky dalam grid CSS. Kuncinya ialah menetapkan align-items: start; pada lajur yang mengandungi elemen melekit untuk mengelakkan tingkah laku peregangan lalai item grid. Imej dimasukkan seperti yang diminta, mengekalkan format dan lokasinya yang asal. Penjelasan menjelaskan interaksi antara position: sticky , align-items , dan susun atur grid CSS.

Atas ialah kandungan terperinci Menggunakan kedudukan melekat dengan grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!