Nouveau titre : Mon point est le suivant : les propriétés collantes des éléments collants ne sont pas préservées lors de l'utilisation de flexbox

Question

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 ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="flexbox-wrapper">
  <div class="regular">
    C'est une boîte ordinaire
  </div>
  <div class="sticky">
    C'est une boîte collante
  </div>
</div>

Problème d'affichage JSFiddle

Answer 1

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'.

Answer 2

É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;  /* 不是必需的 -- 仅作为示例 */
}

<div class="flexbox-wrapper">
  <div class="regular">
    这是普通的盒子
  </div>
  <div class="sticky">
    这是粘性的盒子
  </div>
</div>