1

I'm wondering if anyone has any ideas why I'm having problems with position:sticky inside a float-based layout, but not outside of it.

You can see a fiddle at: https://jsfiddle.net/pjt0kmd7/1/

I'm using the following css for the sticky position:

.sticky {
    min-width: 200px;
    height: 300px;
    background-color: red;
    color: #fff;
    position: sticky;
    top: 1em;
    z-index: 10000;
}

I've also tried removing overflow and heights on the first sticky's parents via:

overflow:none;
height:auto;

But that has not made any difference. Anyone know why the first red box isn't sticky like the second?

Edit Looks like I figured it out, the sticky parent needs a height defined? https://jsfiddle.net/pjt0kmd7/4/

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
magenta placenta
  • 1,461
  • 7
  • 22
  • 34

0 Answers0