Re: specifying position:sticky

On Jul 13, 2013, at 2:15 PM, Simon Fraser <smfr@me.com> wrote:

> 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.

Does the containment block need to be a positioned ancestor? I was assuming so, but this forces you to create a containment block at a more inner level than you might want for other reasons. Suppose, for instance that there is some hover text in a span within each list item (not in the sticky-positioned headers), and you want it to be positioned to the top right of the whole list (help text not scrolling or moving in any way). You could do this by setting position:relative on something wrapping the scroll box, but your plan to do so will be ruined if you have to put position:relative around each letter category box.