Re: specifying position:sticky



On 7/12/13 9:37 AM, "Corey Ford" <cford@mozilla.com> wrote:

>I've been working on specification text for sticky positioning
>(previously discussed starting at [1], and currently implemented in
>WebKit) that I'd be interested in feedback on:
>
>[1] http://lists.w3.org/Archives/Public/www-style/2012Jun/0627.html

>
>
>A sticky positioned box is first laid out in the normal flow (equivalent
>to position: static). The box may be repositioned as follows, but as
>with relative positioning, any repositioning does not affect the box
>that follows.
>
>The box's position depends on its containing block (established as for
>position:static) as well as its scrolling container, defined by the
>nearest ancestor in the same document with a computed value for
>'overflow-x' or 'overflow-y' other than 'visible', or the viewport if no
>such ancestor exists.
>
>For any of 'top', 'bottom', 'left', and 'right' that are not 'auto', if
>the box's normal position would cause that edge of its margin box to be
>less than the specified distance within that paddingedge of its
>scrolling container, the box is repositioned to that distance from the
>edge, such that the box doesnot move while the container scrolls. The
>distance the box is repositioned is limited such that the element's
>margin box never crosses the oppositeedge of the content box of its
>containing block, with the effect thatthe element starts scrolling with
>its container again when it reaches the end of its containing block.(If
>'top', 'bottom', 'left', and 'right' are all 'auto', the effect will be
>identical to relative positioning with those values). None of these
>properties affect the width or height of the element. Percentage values
>of these properties reference the padding box of the scrolling container.
>
>If both 'top' and 'bottom' are not 'auto' and the element's margin box
>is taller than the padding boxheight of the scrolling container minus
>the sum of 'top' and 'bottom', then only 'top' is considered and
>'bottom' is ignored. Similar logic applies for 'left' and 'right' with
>widths, except that if the 'direction' property of the containing block
>is 'ltr', 'right' is ignored, and if it is 'rtl', 'left' is ignored.
>
>Note: Sticky positioned elements are considered 'positioned', so are
>z-ordered according to the same rules asrelatively positioned elements,
>and establish the containing block of absolutely positioned descendants.
>Sticky positioning(like relative positioning)does not affect the
>computed value of 'display' as position:absolute does (so does not force
>an inline element to be displayed as block).

Good write-up! What does position:sticky mean for the OM e.g. offsetTop,
getBoundingClientRect().top and the like?

Received on Saturday, 13 July 2013 18:16:50 UTC