Re: specifying position:sticky

On Jul 13, 2013, at 1:49 PM, Brad Kemper <brad.kemper@gmail.com> wrote:

> On Jul 13, 2013, at 12:48 PM, Corey Ford wrote:
> 
>> No, the opposite edge of the containing block is what limits the repositioning. To take a concrete example, such as sticky-top section headers [1], the headers stay 10px from the top of the viewport until their bottom edge reaches the *bottom* of their containing block, at which point they start scrolling with the document again. (Note that sticky-top only ever moves an element down.)
> 
> Ah, OK, I see what you're saying. So the bottom of the container will push the top off the screen once it no longer fits in the container without scrolling them both.
> 
> Is there also going to be something like on the iPhone Contacts app aphabetic list headings, where two items with the same sticky positioning will push on each other as their container is scrolled, so that they do not overlap? I hope so, as that is a very useful effect.

We deliberately avoided this behavior for sticky, because you get into having to decide when things overlap, which, if they have different X offsets, is not clear. We didn�t want to have to code up something as complex as float avoidance behavior.

You can achieve the iPhone contacts behavior by simply putting each letter category in its own container, and put the sticky header for each in that container. It�s quite natural.

Simon