Parent's padding ignored by sticky positioned child

Question

How to prevent sticky elements from entering behind the title?

The current code snippet uses padding-top on the parent, I've also tried using margin-top or a transparent 50px border on the extra children but it doesn't seem to work.

I know in this case I could easily use top: 50px; on the sticky label but I want to integrate this part into a React component and use a specific size to make the combination different Components become more difficult because they all have to share the top dimensions.

How to make the title/padding "solid" and make the sticky notes impossible to pass through?

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

Not sure if this has a downside that I'm not aware of, or if it would work in your case, but translateY seems to work. But this is definitely very 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