使用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>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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174209491415704.jpg" class="lazy" alt="使用CSS网格使用位置粘性">

此修订后的响应提供了一个完整的，可运行的HTML示例，演示了position: sticky 。关键是设置align-items: start;在包含粘性元件的列上，以防止网格项目的默认拉伸行为。根据要求包含图像，维护其原始格式和位置。该解释阐明了position: sticky ， align-items和CSS网格布局。

以上是使用CSS网格使用位置粘性的详细内容。更多信息请关注PHP中文网其他相关文章！