position: sticky; 관련

CSS > Article(s)

---

Article(s)

---

position: sticky;

Better position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016.

Better position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016. MDN explains it well:

MDN (developer.mozilla.org)

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

position - CSS | MDN

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left physical properties and the inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end flow-relative logical properties can be used to determine the final location of positioned elements.

Šime Vidas pointed this out in a recent Open Web Platform Daily Digest, and ported over the demo from MDN, which demonstrates the usefulness nicely:

See the Pen Sticky positioning by simevidas on CodePen.

As you can see in that demo, it’s a decent candidate for progressive enhancement, as if you don’t see the sticky header feature, it’s no big deal.

position: sticky;

---

Better position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016.