Re: specifying position:sticky

Sent from my iPad

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

> On Jul 13, 2013, at 2:54 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> 
>> On Jul 13, 2013, at 2:15 PM, Simon Fraser <smfr@me.com> wrote:
>>> 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?
> 
> No. Sticky is like position: relative.
> 
>> I was assuming so, 

This should be made clear in the specification too then, and that position:sticky will (presumably) let that element be a containment block for abs-pos descendants. 

OK, that could work then on basic cases, assuming you don't mind the containers' padding pushing the sticky thing away instead of the the next sticky thing pushing directly against it. And, assuming the author didn't need to wrap the sticky thing in something tighter for other reasons. For instance, if you had this:

<div class=articles>
   <article>
        <div class=header>
              <h2>Article One Title</h2>
              <p class=attribution>by Brad Kemper</p>
        </div>
        <p>Text</p>
        <p>of first</p>
        <p>article</p>
   </article>
   <article>
        <div class=header>
              <h2>Article Two Title</h2>
              <p class=attribution>by Simon Fraser</p>
        </div>
        <p>Text</p>
        <p>of second</p>
        <p>article</p>
    </article>
   <article>
        <div class=header>
              <h2>Article Three Title</h2>
              <p class=attribution>by Corey Ford</p>
        </div>
        <p>Text</p>
        <p>of third</p>
        <p>article</p>
    </article>
</div>

Then you could not have just the h2 sticky, with the article and attribution scrolling behind it, and the second sticky h2 pushing away the first one, with something like this:

.articles { height: 7em; overflow: auto; }
.header, .header > * { color: white; background: black; }
h2 { position: sticky; z-index:1; background: rgba(0,0,0,0.7); }