0

Good afternoon everyone. I'm trying to learn all the CSS positions and I've got all of them down but for some reason I can't get sticky to work and it is just acting like a relative.

Here is my HTML:

<!-- Sticky -->
    <section id="sticky">
        <h2>Sticky</h2>
        <div></div>
        <div id="middle"></div>
        <div></div>
    </section>

And here is my CSS:

#sticky #middle {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

If you know what I'm doing wrong please let me know...... it would really mean a lot.

lucas.fox
  • 19
  • 3
  • [Here's](https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working) a nice checklist to go over – Phix Nov 03 '20 at 19:38
  • The div you selected is empty, you need to put content in it, or add a width and height to it. Else, if will not show the div. – Mr PizzaGuy Nov 03 '20 at 19:45

1 Answers1

-1

I didn't have a height property set on the parent. Setting the height property will solve the issue.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
lucas.fox
  • 19
  • 3