Die Polsterung des Elternteils wird vom klebrig positionierten Kind ignoriert

Question

Wie kann verhindert werden, dass klebrige Elemente hinter den Header gelangen?

Das aktuelle Code-Snippet verwendet padding-top für das übergeordnete Element. Ich habe auch versucht, margin-top oder einen transparenten 50-Pixel-Rahmen für die zusätzlichen untergeordneten Elemente zu verwenden, aber es scheint nicht zu funktionieren.

Ich weiß, in diesem Fall könnte ich es problemlos auf Sticky Tags verwenden top: 50px;, aber ich möchte diesen Teil in eine React-Komponente integrieren und die Verwendung bestimmter Größen macht es schwieriger, verschiedene Komponenten zu kombinieren, da sie alle die gleiche Top-Größe haben müssen.

Wie mache ich den Titel/die Polsterung „solide“ und mache es unmöglich, dass die Haftnotizen hindurchgehen?

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

不确定这是否有我不知道的缺点，或者它在您的情况下是否可行，但 translateY 似乎有效。不过这绝对是很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