Le rembourrage du parent ignoré par l'enfant en position collante

Question

Comment empêcher les éléments collants de passer derrière le collecteur ?

L'extrait de code actuel utilise padding-top sur le parent, j'ai également essayé d'utiliser margin-top ou une bordure transparente de 50 px sur les enfants supplémentaires mais cela ne semble pas fonctionner.

Je sais que dans ce cas, je pourrais facilement l'utiliser sur des balises collantes top: 50px; mais je souhaite intégrer cette partie dans un composant React et l'utilisation de tailles spécifiques rend plus difficile la combinaison de différents composants car ils doivent tous partager la taille supérieure.

Comment rendre le titre/le remplissage « solide » et rendre les notes autocollantes impossibles à passer ?

body{
  background: rgb(200,200,200);
  padding:0px;
  margin:0px;
}
header{
  height: 50px;
  font-size: 2em;
  background: aqua;
  opacity: 0.6;
  text-align:center; 
  position: fixed; 
  width: 100%;
}
.content-wrapper{
  padding-top: 50px; /* keeps the header space */
  
  height: 800px; /*for demo*/
}
.sticky{
  position: sticky;
  top:0;
}

<header>header</header>
<div class="content-wrapper">
  <div class="sticky">
  Hello, I am a sticky element
  <div>
<div>

Answer 1

Je ne sais pas si cela présente un inconvénient dont je ne suis pas au courant, ou si cela fonctionnerait dans votre cas, mais translateY semble fonctionner. Mais c'est vraiment très hacky.

body{
  background: rgb(200,200,200);
  padding:0px;
  margin:0px;
}
header{
  height: 50px;
  font-size: 2em;
  background: aqua;
  opacity: 0.6;
  text-align:center; 
  position: fixed; 
  width: 100%;
}
.content-wrapper{
  position: relative;
  height: 800px; /*for demo*/
  transform: translateY(50px);
}
.sticky{
  position: sticky;
  top:0;
}

.spacer {
  height: 200px;
}

header


  

  Hello, I am a sticky element