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 그리드와 함께 위치 스티커 사용">

이 개정 된 응답은 CSS 그리드 내의 position: sticky 사용을 보여주는 완전하고 실행 가능한 HTML 예제를 제공합니다. 키는 align-items: start; 그리드 항목의 기본 스트레칭 동작을 방지하기 위해 스티커 요소가 포함 된 열에서. 이미지는 원래 형식과 위치를 유지하는 요청에 따라 포함됩니다. 설명은 position: sticky , align-items 및 CSS 그리드 레이아웃.

위 내용은 CSS 그리드와 함께 위치 스티커 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!