Pelapik ibu bapa tidak diendahkan oleh anak yang berkedudukan melekit

Question

Bagaimana untuk mengelakkan unsur melekit daripada berada di belakang pengepala?

Coretan kod semasa menggunakan padding-top pada induk, saya juga telah mencuba menggunakan margin-top atau jidar 50px lutsinar pada kanak-kanak tambahan tetapi ia nampaknya tidak berkesan.

Saya tahu dalam kes ini saya boleh gunakan dengan mudah pada tag melekit top: 50px; tetapi saya ingin menyepadukan bahagian ini ke dalam komponen React dan menggunakan saiz tertentu menjadikannya lebih sukar untuk menggabungkan komponen yang berbeza kerana semuanya perlu berkongsi saiz Atas.

Bagaimana untuk menjadikan tajuk/padding "padat" dan membuat nota melekit mustahil untuk dilalui?

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

Tidak pasti sama ada ini mempunyai kelemahan yang saya tidak sedar, atau jika ia akan berkesan dalam kes anda, tetapi translateY nampaknya berkesan. Tetapi ini pastinya sangat meretas.

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