Position sticky doesn't work (BUG)

Position sticky won't work until there are HTMLElement before it in the DOM especially <p> element with margin. If you, however, delete all the element before it in the DOM position sticky will work as expected.

by Konstantin Rouda

HTML

<p class="o-text">
  I do not find it easy to get sufficiently far away from this
Book, in the first sensations of having finished it, to refer
to it with the composure which this formal heading would
seem to require. My interest in it, is so recent and strong;
and my mind is so divided between pleasure and regret -
pleasure in the achievement of a long design, regret in the
separation from many companions - that I am in danger of
wearying the reader whom I love, with personal confidences,
and private emotions.
Besides which, all that I could say of the Story, to any
purpose, I have endeavoured to say in it.
It would concern the reader little, perhaps, to know, how
sorrowfully the pen is laid down at the close of a two-years’
imaginative task; or how an Author feels as if he were dismissing
some portion of himself into the shadowy world,
when a crowd of the creatures of his brain are going from
him for ever. Yet, I have nothing else to tell; unless, indeed,
I were to confess (which might be of less moment still) that
no one can ever believe this Narrative, in the reading, more
than I have believed it in the writing.   Instead of looking back, therefore, I will look forward. I
cannot close this Volume more agreeably to myself, than
with a hopeful glance towards the time when I shall again
put forth my two green leaves once a month, and with a faithful remembrance of the genial sun and showers that
have fallen on these leaves of David Copperfield, and made
me happy. I REMARKED in the original Preface to this Book, that I
did not find it easy to get sufficiently far away from it, in
the first sensations of having finished it, to refer to it with
the composure which this formal heading would seem to
require. My interest in it was so recent and strong, and my
mind was so divided between pleasure and regret - pleasure
in the achievement of a long design, regret in the separation
from many companions - that I was in danger of wearying
the reader with personal...

CSS

HTML {
  font-size: 100%; /*~16px*/
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  height: 720px;
  margin: 0;
  padding: 0 1rem;
  color: rgb(58, 61, 64);
  background-color: rgb(247, 247, 247);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}


/*Actual Style*/
/*========================
      ARTICLE PREVIEW
==========================*/
.c-article-preview {
  
  
  position: sticky;
  top: 0;
  
  
  width: 600px;
  height: 350px;
  margin: 2rem auto 0;
  font-size: 1rem;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .2);
  border-radius: 0.3rem;
}













/*------------NOT RELEVANT TO THE BUG-----------------*/



H3 {
  margin: 0;
}

P {
  font-size: 1.5rem;
  max-width: 80%;
  margin: 2rem auto;
}

/*========================
      IMAGE WRAPPER
==========================*/
.c-article-preview__image-wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
}

/*========================
          IMAGE
==========================*/
.c-article-preview__image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/*========================
         CONTENT
==========================*/
.c-article-preview__content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0rem 0rem 0rem 2rem;
  transform-origin: bottom right;
  background: rgba(242, 242, 242, 1);
  font-weight: 500;
  border-radius: inherit;
}

/*--- RED ---*/
.c-article-preview--red .c-article-preview__content {
  background: rgb(255, 242, 245);
  color: rgb(185, 19, 63);
}

/*--- PEACH ---*/
.c-article-preview--peach .c-article-preview__content {
  background: rgb(255, 196, 128);
  color: rgb(66, 35, 14);
}

/*--- IS ANIMATED ---*/
.c-article-preview.is-animated .c-article-preview__content {
  animation: scale-down .5s ease-out forwards;
}

/*========================
      PREVIEW LINK
==========================*/
.c-article-preview__link {
  display: flex;
  align-items: center;
  width: 100%;
  height:...

JavaScript

/*
Position sticky won't work until there are HTMLElement before it in the DOM especially <p> element with margin. If you, however, delete all the element before it in the DOM position sticky will work as expected.
*/