使用CSS網格使用位置粘性

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS網格帶有位置粘性</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 id="CSS網格和位置-粘性">CSS網格和位置：粘性</h1>
    <div class="grid-container">
        <div class="sticky-column">
            <div class="sticky-element">該元素應粘在頂部。</div>
            <p>這裡有很多內容，以使列更高。</p>
            <p>更多內容以將粘性元素推向下降。</p>
            <p>更多內容...</p>
        </div>
        <div>
            <p>此列比粘列高。</p>
            <p>這裡有更多內容。</p>
            <p>還有更多內容。</p>
            <p>很多內容。</p>
        </div>
    </div>
    <p>向下滾動以查看起作用的粘性元素。</p>

    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174209491415704.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="使用CSS網格使用位置粘性">

此修訂後的響應提供了一個完整的，可運行的HTML示例，演示了position: sticky 。關鍵是設置align-items: start;在包含粘性元件的列上，以防止網格項目的默認拉伸行為。根據要求包含圖像，維護其原始格式和位置。該解釋闡明了position: sticky ， align-items和CSS網格佈局。

以上是使用CSS網格使用位置粘性的詳細內容。更多資訊請關注PHP中文網其他相關文章！