RE: specifying position:sticky

On Friday, July 12, 2013 9:38 AM Corey Ford 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).

This is good text and should probably be added to the wiki for consideration in adding it to the Positioning spec in the future.

http://wiki.csswg.org/spec/css3-positioning


Please feel free to update the wiki with any additional thoughts on the position: sticky value.

--
Thanks,
Arron Eicholz

Received on Friday, 12 July 2013 17:02:26 UTC