suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Die Polsterung des Elternteils wird vom klebrig positionierten Kind ignoriert

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>

P粉182218860P粉182218860303 Tage vor575

Antworte allen(1)Ich werde antworten

  • P粉465675962

    P粉4656759622024-04-07 00:10:34

    不确定这是否有我不知道的缺点,或者它在您的情况下是否可行,但 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

    Antwort
    0
  • StornierenAntwort