Utilisation de la position collante avec la grille CSS

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grille CSS avec position collante</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>Grille CSS et position: collante</h1>
    <div class="grid-container">
        <div class="sticky-column">
            <div class="sticky-element">Cet élément doit s'en tenir au sommet.</div>
            <p>Beaucoup de contenu ici pour rendre la colonne plus haute.</p>
            <p>Plus de contenu pour pousser l'élément collant vers le bas.</p>
            <p>Encore plus de contenu ...</p>
        </div>
        <div>
            <p>Cette colonne est plus haute que la colonne collante.</p>
            <p>Plus de contenu ici.</p>
            <p>Et plus de contenu.</p>
            <p>Beaucoup, beaucoup de contenu.</p>
        </div>
    </div>
    <p>Faites défiler vers le bas pour voir l'élément collant en action.</p>

    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174209491415704.jpg" class="lazy" alt="Utilisation de la position collante avec la grille CSS">

Cette réponse révisée fournit un exemple HTML complet et exécutable démontrant l'utilisation de position: sticky dans une grille CSS. La clé est de définir align-items: start; sur la colonne contenant l'élément collant pour empêcher le comportement d'étirement par défaut des éléments de la grille. L'image est incluse comme demandé, en maintenant son format et son emplacement d'origine. L'explication clarifie l'interaction entre position: sticky , align-items et la disposition de la grille CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!