J'étais bloqué sur ce problème pendant un moment et je voulais partager cette position : sticky + flexbox issue :
Mon div collant, après être passé à la vue conteneur flexbox, n'est soudainement plus collant lorsqu'il est enveloppé dans un élément parent flexbox.
.flexbox-wrapper { affichage : flexible ; hauteur : 600 px ; } .régulier { couleur de fond : bleu ; } .collant { position : -webkit-sticky ; position : collante ; haut : 0 ; couleur de fond : rouge ; } C'est une boîte ordinaire C'est une boîte collante
Problème d'affichage JSFiddle
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dans mon cas, un conteneur parent appliquait la fonctionnalité de
overflow-x: hidden;这个样式，这会破坏position: sticky. Vous devez supprimer cette règle.Aucun élément parent ne doit être soumis aux règles CSS ci-dessus. Cette condition s'applique à tous les éléments parents jusqu'à (mais non compris) l'élément 'body'.
Étant donné que l'élément flexbox est par défaut
stretch, tous les éléments ont la même hauteur et ne peuvent pas défiler.Ajoutez
align-self: flex-startà l'élément collant, réglez la hauteur sur automatique, permettant ainsi le défilement et la fixation.Actuellement, cela est pris en charge dans tous les principaux navigateurs, mais Safari a encore quelques problèmes avec l'utilisation des tables de
-webkit-前缀，而除了Firefox之外的其他浏览器在使用position: sticky..flexbox-wrapper { display: flex; overflow: auto; height: 200px; /* 不是必需的 -- 仅作为示例 */ } .regular { background-color: blue; /* 不是必需的 -- 仅作为示例 */ height: 600px; /* 不是必需的 -- 仅作为示例 */ } .sticky { position: -webkit-sticky; /* 适用于Safari */ position: sticky; top: 0; align-self: flex-start; /* <-- 这是修复的地方 */ background-color: red; /* 不是必需的 -- 仅作为示例 */ }