Introducing position:sticky

Author: rossen

css-position/Overview.html

@@ -107,7 +107,7 @@
 
    <h1>CSS Positioned Layout Module Level 3</h1>
 
-   <h2 class="no-num no-toc">Editor's Draft 13 October 2013</h2>
+   <h2 class="no-num no-toc">Editor's Draft 14 October 2013</h2>
 
    <dl>
     <dt>This version:
@@ -1806,7 +1806,10 @@ <h3 id=box-offsets-trbl><span class=secno>6.8. </span>Box offsets: ‘<a
      <td> for <a href="#relative" title="'position'!!''relative''">‘<code
       class=css>position: relative</code>’</a>, see <a
       href="#relative-positioning1" title="relative positioning">Relative
-      Positioning</a>. For <a href="#static"
+      positioning</a>. For <a href="#sticky"
+      title="'position'!!''sticky''">‘<code class=css>position:
+      sticky</code>’</a>, see <span title="sticky positioning">Sticky
+      positioning</span>. For <a href="#static"
       title="'position'!!''static''">‘<code class=css>position:
       static</code>’</a>, ‘<code class=css>auto</code>’. Otherwise: if
       specified as a ‘<code class=css>&lt;length&gt;</code>’, the
@@ -1831,6 +1834,11 @@ <h3 id=box-offsets-trbl><span class=secno>6.8. </span>Box offsets: ‘<a
    (i.e., the box is given a position in the <a href="#normal-flow0">normal
    flow</a>, and then offset from that position according to this property).
 
+  <p id=for-stickily-positioned-boxes-the-value-0> For stickily positioned
+   boxes, the value is used to compute the <em>sticky-constraint
+   rectangle</em> as described in <span title="sticky positioning">Sticky
+   positioning</span>.
+
   <p id=for-absolutely-positioned-and-center-pos0> For absolutely positioned
    and center positioned elements whose <a
    href="#containing-block0">containing block</a> is based on a block-level
@@ -1890,7 +1898,10 @@ <h3 id=box-offsets-trbl><span class=secno>6.8. </span>Box offsets: ‘<a
      <td> for <a href="#relative" title="'position'!!''relative''">‘<code
       class=css>position: relative</code>’</a>, see <a
       href="#relative-positioning1" title="relative positioning">Relative
-      Positioning</a>. For <a href="#static"
+      positioning</a>. For <a href="#sticky"
+      title="'position'!!''sticky''">‘<code class=css>position:
+      sticky</code>’</a>, see <span title="sticky positioning">Sticky
+      positioning</span>. For <a href="#static"
       title="'position'!!''static''">‘<code class=css>position:
       static</code>’</a>, ‘<code class=css>auto</code>’. Otherwise: if
       specified as a ‘<code class=css>&lt;length&gt;</code>’, the
@@ -1915,6 +1926,11 @@ <h3 id=box-offsets-trbl><span class=secno>6.8. </span>Box offsets: ‘<a
    (i.e., the box is given a position in the <a href="#normal-flow0">normal
    flow</a>, and then offset from that position according to this property).
 
+  <p id=for-stickily-positioned-boxes-the-value-1> For stickily positioned
+   boxes, the value is used to compute the <em>sticky-constraint
+   rectangle</em> as described in <span title="sticky positioning">Sticky
+   positioning</span>.
+
   <p id=for-absolutely-positioned-and-center-pos1> For absolutely positioned
    and center positioned elements whose <a
    href="#containing-block0">containing block</a> is based on a block-level
@@ -2002,7 +2018,7 @@ <h3 id=box-offsets-trbl><span class=secno>6.8. </span>Box offsets: ‘<a
    (i.e., the box is given a position in the <a href="#normal-flow0">normal
    flow</a>, and then offset from that position according to this property).
 
-  <p id=for-stickily-positioned-boxes-the-value-0> For stickily positioned
+  <p id=for-stickily-positioned-boxes-the-value-2> For stickily positioned
    boxes, the value is used to compute the <em>sticky-constraint
    rectangle</em> as described in <span title="sticky positioning">Sticky
    positioning</span>.

css-position/Overview.src.html

@@ -412,7 +412,7 @@ <h2 id="positioning-schemes"><dfn title="positioning schemes">Positioning scheme
                 Normal flow<br>
                 In CSS, <span>normal flow</span> includes <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block formatting</a> of block-level boxes, 
                 <a href="http://www.w3.org/TR/CSS2/visuren.html#inline-formatting">inline formatting</a> of inline-level boxes, 
-                and <span title="relative positioning">relative</span> and <span title="sticky positioning">sticky</span> positioning of block-level and inline-level boxes.
+                and <span title="relative positioning">relative</span> and <span title="sticky positioning">sticky</span> positioning of block-level and inline-level boxes.
             </li>
             <li>
                 Floats<br>
@@ -1047,7 +1047,9 @@ <h3 id="box-offsets-trbl">Box offsets: 'top', 'right', 'bottom', 'left'</h3>
             <tr>
                 <th>Computed&nbsp;value:</th>
                 <td>
-                    for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>, 
+                    for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative positioning</span>.
+                    For <span title="'position'!!''sticky''">'position: sticky'</span>, see <span title="sticky positioning">Sticky positioning</span>.
+                    For <span title="'position'!!''static''">'position: static'</span>, 
                     ''auto''. Otherwise: if specified as a '&lt;length&gt;', the corresponding absolute length; 
                     if specified as a '&lt;percentage&gt;', the specified value; otherwise, ''auto''.
                 </td>
@@ -1067,6 +1069,10 @@ <h3 id="box-offsets-trbl">Box offsets: 'top', 'right', 'bottom', 'left'</h3>
             offset from that position according to this property).
         </p>
         <p>
+            For stickily positioned boxes, the value is used to compute the <em>sticky-constraint
+            rectangle</em> as described in <span title="sticky positioning">Sticky positioning</span>.
+        </p>
+        <p>
             For absolutely positioned and center positioned elements whose <span>containing block</span> 
             is based on a block-level element, this property is an offset from the padding edge of 
             that element.
@@ -1112,7 +1118,9 @@ <h3 id="box-offsets-trbl">Box offsets: 'top', 'right', 'bottom', 'left'</h3>
             <tr>
                 <th>Computed&nbsp;value:</th>
                 <td>
-                    for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>, 
+                    for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative positioning</span>.
+                    For <span title="'position'!!''sticky''">'position: sticky'</span>, see <span title="sticky positioning">Sticky positioning</span>.
+                    For <span title="'position'!!''static''">'position: static'</span>, 
                     ''auto''. Otherwise: if specified as a '&lt;length&gt;', the corresponding absolute length; 
                     if specified as a '&lt;percentage&gt;', the specified value; otherwise, ''auto''.
                 </td>
@@ -1132,6 +1140,10 @@ <h3 id="box-offsets-trbl">Box offsets: 'top', 'right', 'bottom', 'left'</h3>
             offset from that position according to this property).
         </p>
         <p>
+            For stickily positioned boxes, the value is used to compute the <em>sticky-constraint
+            rectangle</em> as described in <span title="sticky positioning">Sticky positioning</span>.
+        </p>
+        <p>
             For absolutely positioned and center positioned elements whose <span>containing block</span> 
             is based on a block-level element, this property is an offset from the padding edge of 
             that element.