Maison > interface Web > tutoriel CSS > Pourquoi mon élément Sticky ne fonctionne-t-il pas dans un conteneur Flexbox ?

Pourquoi mon élément Sticky ne fonctionne-t-il pas dans un conteneur Flexbox ?

DDD
Libérer: 2024-12-15 01:22:21
original
163 Les gens l'ont consulté

Why Doesn't My Sticky Element Work in a Flexbox Container?

Flexbox Gotcha : Position : l'élément collant se comporte de manière imprévisible

Les développeurs rencontrent souvent un comportement inattendu lorsqu'ils utilisent position : sticky dans un conteneur flexbox. Par défaut, les éléments flexbox s'étirent pour remplir l'espace disponible, ce qui donne des hauteurs égales pour tous les éléments, ce qui empêche le défilement et rend l'élément collant non fonctionnel.

La solution réside dans la modification de la propriété align-self de l'élément collant. à flex-start, qui réinitialise sa hauteur sur auto. Cela permet le défilement et permet à l'élément collant d'adhérer à sa position prévue.

Exemple :

Dans le code suivant, l'élément collant ne fonctionnait pas correctement jusqu'à l'alignement. self : flex-start a été ajouté :

<div>
Copier après la connexion
.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;
}
.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}
Copier après la connexion

Navigateur Support :

  • align-self : flex-start est pris en charge dans tous les principaux navigateurs, à l'exception de Safari, qui nécessite le préfixe -webkit- :

    .sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      align-self: flex-start;
    }
    Copier après la connexion

En implémentant ce correctif, les développeurs peuvent garantir que les éléments collants se comportent comme prévu dans les conteneurs flexbox.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal