Pourquoi `overflow: hidden` empêche-t-il` `position: sticky` de fonctionner?

Question

Dans l'extrait suivant, il y a un post - div positionnée à l'intérieur d'un conteneur. Il tient au-dessus de la vitesse de défilement du panneau tout en restant à l'intérieur de son contenant tous les temps. C'est le même comportement que celui de la UITableView - têtes sur iOS, où les en-têtes de rester visible jusqu'à la prochaine tête est en haut.

Dans le deuxième extrait, tout est la même, sauf que le récipient a un overflow:hidden règle CSS. Ce qui semble empêcher l' position:sticky comportement de fonctionner correctement.

.parent {
  position: relative;
  background: #ccc;
  width: 500px;
  height: 150px;
  overflow: auto;
  margin-bottom: 20px;
}

.hidden-overflow {
  overflow: hidden;
}

.sticky {
  position: sticky;
  background: #333;
  text-align: center;
  color: #fff;
  top: 10px;
}

<div class="parent">
  <div>
    <div class="sticky">
      Hi, I am a sticky inside the container which contains the first paragraph.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat
    nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
  </p>
  <p>
    Integer congue augue a quam tincidunt, vitae dictum sem iaculis. Proin feugiat nibh vitae leo facilisis, eget laoreet augue dictum. Nunc facilisis tempor feugiat. Aenean eget interdum diam. Maecenas non risus iaculis, scelerisque ipsum eu, facilisis urna.
    Integer velit justo, vestibulum vel vulputate vel, bibendum eu lorem. Phasellus viverra nisl a mi pretium eleifend.
  </p>
</div>
<div class="parent">
  <div class="hidden-overflow">
    <div class="sticky">
      Hi, I am another sticky in the container which contains the first paragraph, but my container has overflow:hidden.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat
    nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
  </p>
  <p>
    Integer congue augue a quam tincidunt, vitae dictum sem iaculis. Proin feugiat nibh vitae leo facilisis, eget laoreet augue dictum. Nunc facilisis tempor feugiat. Aenean eget interdum diam. Maecenas non risus iaculis, scelerisque ipsum eu, facilisis urna.
    Integer velit justo, vestibulum vel vulputate vel, bibendum eu lorem. Phasellus viverra nisl a mi pretium eleifend.
  </p>
</div>

_{(Extrait adapté de @Daniel est ici)}

Pourquoi ne peut - position:sticky travailler dans un récipient avec de l' overflow:hidden?

Answer 1

overflow: hidden n'est pas en empêchant position: sticky de travail. Mais si vous définissez overflow de hidden sur un ancêtre de votre collant élément, puis cet ancêtre de l'élément sera le défilement du conteneur pour votre collant élément. Si vous mettez l' overflow de la valeur de votre ancêtre d' hidden de scroll de défilement et de cet ancêtre (pas de la fenêtre), puis vous pouvez voir que le collant est encore à travailler.

Voir aussi https://github.com/wilddeer/stickyfill#pro-tips:

Tout non-valeur par défaut (non visible) pour le débordement, overflow-x, ou overflow-y sur les prédécesseur éléments ancre le collant à le dépassement de contexte de qui prédécesseur. Pour parler simplement, le défilement le prédécesseur sera la cause de la colle en bâton, le défilement de la fenêtre ne sera pas. C'est prévu avec un overflow: auto et overflow: scroll, mais souvent, les causes de difficultés et de confusion avec overflow: hidden.

Ou http://www.coreyford.name/files/position-sticky-presentation/:

La position dépend de son bloc contenant (établis que pour les position:static) ainsi que de son défilement conteneur, défini par l' plus proche de l'ancêtre dans le même document avec la valeur calculée pour 'overflow-x" ou "overflow-y' autre qu 'visible', ou de la fenêtre d'affichage si aucun de ces ancêtre existe.

Ou le CSS Placé de Mise en page au Niveau du Module 3 W3C Working Draft:

Un stickily positionné boîte est positionné de la même façon à un nombre relativement positionné boîte, mais le décalage est calculé en référence à la plus proche ancêtre avec un défilement de la boîte ou de la fenêtre d'affichage si aucun ancêtre n' a une zone de défilement.

Answer 2

Je ne suis pas sûr que cela fonctionne dans tous les cas, mais j'ai couru contre et a été en mesure de contourner le problème en remplaçant overflow: hidden; avec clip-chemins.

.parent {
    /*overflow: hidden; removed */
    position: absolute; /*this is required for clip-paths to work*/
    -webkit-clip-path: inset(0); /* safari*/
    clip-path: inset(0);
    clip: rect(0px, auto, auto, 0px); /* IE11/Edge (not that IE11 supports sticky anyway!) */
}

Aussi loin que d'avoir à ajouter de position absolue, enveloppant le overflow:hidden élément dans une autre position: relative de l'élément, puis en ajoutant le haut, le bas, la gauche et la droite: 0; doit faire remplir le conteneur parent.

Answer 3

Selon Mozilla ( lien ici )

Collant expérimentale de l'API et ne doit pas être utilisé dans le code de production.

Donc, pour moi, c'est la seule raison pourquoi il ne fonctionne pas. Les deux Bord et IE 11 ne support qu'il soit donc pour moi, faire quelque chose comme ça avec du javascript serait la voie à suivre, il ya beaucoup là-bas qui peut vous aider.

Un exemple en étant présent ici

Espérons que cette aide.