Mercurial > drafts / file revision

 <h1>CSS Positioned Layout Module Level 3</h1>

 <pre class='metadata'>

 Status: ED

 Work Status: Exploring

 Shortname: css-position

 Level: 1

 Group: csswg

 ED: https://drafts.csswg.org/css-position/

 TR: http://www.w3.org/TR/css3-positioning/

 Previous Version: http://www.w3.org/TR/2015/WD-css3-positioning-20150203/

 Previous Version: http://www.w3.org/TR/2012/WD-css3-positioning-20120207/

 Editor: Rossen Atanassov, Microsoft, [email protected]

 Editor: Arron Eicholz, Microsoft, [email protected]

 !Issues list: <a href="http://wiki.csswg.org/spec/css-position/">in Wiki</a>

 Abstract:This module contains the features of CSS level&nbsp;3 relating to positioning and stacking of elements. It includes and extends the functionality of CSS level&nbsp;2 ([[!CSS21]]), which builds on CSS level&nbsp;1 [[CSS1]]. The main extensions compared to level&nbsp;2 are the ability to position elements based on CSS Region boxes, the ability to specify different containing blocks for elements and sticky positioning. <p>Other kinds of layout, such as tables, "floating" boxes, ruby annotations, grid layouts, columns and basic handling of normal "flow" content, are described in other modules. Also, the layout of text inside each line is defined elsewhere.

 Ignored Terms: div, dl, dfn, attachment-type, attachment-top, attachment-right, attachment-bottom, attachment-left, attachment, scrolling box

 Link Defaults: css-transforms-1 (property) transform

 </pre>

 <style type="text/css">

   .cb-example-table {

     border: 1px solid;

     border-collapse: collapse;

     font-size: smaller;

     text-align: center;

     margin: 0 2em;

   }

   .cb-example-table td, .cb-example-table th {

     border: 1px solid;

     padding: 0 3px;

   }

   code span, td span {

     white-space: nowrap;

   }

   .relationship-table {

     border: 1px solid;

     border-collapse: collapse;

     font-size: smaller;

     margin: 0 6em;

   }

   .relationship-table th {

     text-align: center;

     white-space:nowrap;

   }

   .relationship-table td, .relationship-table th {

     border: 1px solid;

     padding: 0 3px;

   }

   h2 dfn, h3 dfn {

     font: inherit;

   }

   table.lpr {

     border-collapse: collapse;

   }

   .lpr td, .lpr th {

     border: 1px solid;

     text-align: center;

   }

   .lpr col {

     background: rgb(221, 238, 255);

     border-right: 2px solid;

     font-weight: bold;

     padding: 0 5px;

   }

   .lpr div {

     font-weight: bold;

     -moz-transform: rotate(-90deg) translatex(-0.5em);

     -ms-transform: rotate(-90deg) translatex(-0.5em);

     -o-transform: rotate(-90deg) translatex(-0.5em);

     -webkit-transform: rotate(-90deg) translatex(-0.5em);

     transform: rotate(-90deg) translatex(-0.5em);

     width: 1.5em;

   }

   .lpr th:first-child {

     border: none;

     background: white;

   }

   .lpr tbody td:first-child {

     font-weight: normal;

   }

   .lpr thead td {

     background: rgb(238, 238, 238);

     font-weight: bold;

     padding: 0 5px;

     vertical-align: bottom;

     white-space: nowrap;

   }

   .lpr thead tr:nth-child(2) {

     border-bottom: 2px solid;

   }

 </style>

 <h2 id="intro">

 Introduction</h2>

   <em>This section is not normative.</em>

   CSS assumes the document layout is modeled as a tree of elements. The unique

   element that has no parent is called the root element. This module describes

   how any of the elements from the tree of elements can be arranged independent

   of document order (i.e. taken out of "flow"). With a positioned element the

   element may be placed anywhere within the content not specifically respecting

   the tree of elements order.

   In [[!CSS21]], the visual formatting model explained how each element in the

   document tree generates zero or more boxes according to the box model. This

   module further explains and extends the positioning scheme. The layout of

   these boxes is governed by:

   <ul>

     <li>

       <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">box dimensions</a>

       and <a href="http://www.w3.org/TR/CSS2/visuren.html#box-gen">type</a>.

     <li>

       positioning scheme (<a>normal flow</a>, float, and absolute positioning).

     <li>

       relationships between elements in the

       <a href="http://www.w3.org/TR/CSS2/conform.html#doctree">document tree</a>.

     <li>

       external information (e.g., viewport size, intrinsic dimensions of images, etc.).

   </ul>

   The properties defined in this module apply to both continuous media and paged

   media.

 <h3 id="placement">

 Module Interactions</h3>

   This module replaced and extends the positioning scheme features defined in

   [[!CSS21]] sections:

   <ul>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visuren.html#viewport">9.1.1 The viewport</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visuren.html#containing-block">9.1.2 Containing blocks</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme">9.3 Positioning schemes</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visuren.html#relative-positioning">9.4.3 Relative positioning</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning">9.6 Absolute positioning</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">9.7 Relationships between display, position, and float</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visuren.html#comparison">9.8 Comparison of normal flow, floats, and absolute positioning</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visuren.html#layers">9.9 Layered presentation</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">10.1 Definition of "containing block"</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">10.3.7 Absolutely positioned, non-replaced elements</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">10.3.8 Absolutely positioned, replaced elements</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">10.6.4 Absolutely positioned, non-replaced elements</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height">10.6.5 Absolutely positioned replaced elements</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/visudet.html#root-height">10.6.7 Auto heights for block formatting context roots</a>

     <li>

     <a href="http://www.w3.org/TR/CSS2/zindex.html">Appendix E. Elaborate description of Stacking Contexts</a>

   </ul>

 <!-- End section" Module Interactions -->

 <h3 id="values">

 Values</h3>

   This specification follows the CSS property definition conventions from [[!CSS21]].

   Value types not defined in this specification are defined in CSS Level 2

   Revision 1 [[!CSS21]]. Other CSS modules may expand the definitions of these

   value types: for example [[!CSS3VAL]], when combined with this module, expands

   the definition of the <length> value type as used in this specification.

   In addition to the property-specific values listed in their definitions, all

   properties defined in this specification also accept the

   <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>

   keyword as their property value. For readability it has not been repeated

   explicitly.

 <!-- End section: Values -->

 <!-- End section Introduction -->

 <h2 id="vp">

 The <dfn lt="viewport">Viewport</dfn></h2>

     User agents for <a href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a> generally offer users a viewport (a window or other

     viewing area on the screen) through which users consult a document. User

     agents may change the document’s layout when the viewport is resized

     (see the <span>initial containing block</span>).

     When the viewport is smaller than the area of the canvas on which the document

     is rendered, the user agent may offer a scrolling mechanism. There is at most

     one viewport per <a href="http://www.w3.org/TR/CSS2/intro.html#canvas">canvas</a>,

     but user agents may render to more than one canvas (i.e., provide different

     views of the same document).

 <!-- End section: The Viewport -->

 <h2 id="cb">

 Containing Blocks</h2>

   In CSS, many box positions and sizes are calculated with respect to the edges

   of a rectangular box called a containing block. In general, generated boxes

   act as containing blocks for descendant boxes; we say that a box "establishes"

   the containing block for its descendants. The phrase "a box’s containing

   block" means "the containing block in which the box lives," not the one it

   generates.

   Each box is given a position with respect to its containing block, but it is

   not confined by this containing block; it may

   <a href="http://www.w3.org/TR/CSS2/visufx.html#overflow">overflow</a>.

 <h3 id="def-cb">

 Definition of <dfn lt="containing block">containing block</dfn></h3>

   The position and size of an element’s box(es) are sometimes computed relative

   to a certain rectangle, called the containing block of the element. The containing

   block of a ''position/static'' or

   ''position/relative'' element is defined

   in the Box Model [[!CSS3BOX]]. The containing block of a

   ''position/sticky'' element is the same as for a

   ''position/relative'' element. For

   ''position/fixed'' and

   ''position/absolute'', it is defined as follows:

   <ol>

     <li>

     If the element has ''position: fixed'', the containing block is established by the

     <a>viewport</a> in the case of continuous media or the page area in

     the case of paged media.

     <li>

     If the element has ''position: absolute'',

     the containing block is established by the nearest ancestor with a 'position'

     other than ''position/static'', in the following way:

     <ol>

       <li>

       In the case that the ancestor is block-level, the containing block is formed

       by the padding edge of the ancestor.

       <li>

       In the case that the ancestor is inline-level, the containing block depends

       on the 'direction' property of the ancestor:

       <ol>

         <li>

           If the 'direction' is ''ltr'', the top and left of the containing

           block are the top and left content edges of the first box generated

           by the ancestor, and the bottom and right are the bottom and right

           content edges of the last box of the ancestor.

         <li>

         If the 'direction' is ''rtl'', the top and right are the

         top and right edges of the first box generated by the ancestor, and

         the bottom and left are the bottom and left content edges of the

         last box of the ancestor.

         <p class="note">

           Note, in some cases when a line wraps it may seem as if the left

           and right positions are swapped.

         </p>

       </ol>

     </ol>

     <li>

     <li>

     If there is no such ancestor, the containing block is the <a>initial

     containing block</a>.

   </ol>

   In paged media, an absolutely positioned element is positioned relative to its

   containing block ignoring any page breaks (as if the document were continuous). The

   element may subsequently be broken over several pages.

   For absolutely positioned content that resolves to a position on a page other than the

   page being laid out (the current page), or resolves to a position on the current page

   which has already been rendered for printing, printers may place the content:

   <ul>

     <li>on the current page,</li>

     <li>on a subsequent page, or</li>

     <li>may omit it altogether.</li>

   </ul>

 <p class="note">

   Note, a block-level element that is split over several pages may have a different width

   on each page and that there may be device-specific limits.

 </p>

 <div class="example">

   With no positioning, the containing blocks (C.B.) in the following document:

 <pre><code class="html">

 <!DOCTYPE html>

 <html>

     <head>

         <title>Illustration of containing blocks</title>

     </head>

     <body id="body">

         <div id="div1">

         <p id="p1">This is text in the first paragraph...</p>

         <p id="p2">This is text <em id="em1"> in the

         <strong id="strong1">second</strong> paragraph.</em></p>

         </div>

     </body>

 </html>

 </code></pre>

   are established as follows:

 <table class="cb-example-table">

   <tr><th>For box generated by </th>

   <th>C.B. is established by</th></tr>

   <tr><td>html</td><td>initial C.B. (UA-dependent)</td></tr>

   <tr><td>body</td><td>html</td></tr>

   <tr><td>div1</td><td>body</td></tr>

   <tr><td>p1</td><td>div1</td></tr>

   <tr><td>p2</td><td>div1</td></tr>

   <tr><td>em1</td><td>p2</td></tr>

   <tr><td>strong1</td><td>p2</td></tr>

 </table>

   If we position "div1":

 <pre><code class="css">

 #div1 { position: absolute; left: 50px; top: 50px }

 </code></pre>

   its containing block is no longer "body"; it becomes the <span>initial containing block</span>

   (since there are no other positioned ancestor boxes).

   If we position "em1" as well:

 <pre><code class="css">

 #div1 { position: absolute; left: 50px; top: 50px }

 #em1  { position: absolute; left: 100px; top: 100px }

 </code></pre>

   the table of containing blocks becomes:

   <table class="cb-example-table">

     <tr><th>For box generated by</th>

     <th>C.B. is established by</th></tr>

     <tr><td>html</td><td>initial C.B. (UA-dependent)</td></tr>

     <tr><td>body</td><td>html</td></tr>

     <tr><td>div1</td><td>initial C.B.</td></tr>

     <tr><td>p1</td><td>div1</td></tr>

     <tr><td>p2</td><td>div1</td></tr>

     <tr><td>em1</td><td>div1</td></tr>

     <tr><td>strong1</td><td>em1</td></tr>

   </table>

   By positioning "em1", its containing block becomes the nearest positioned ancestor box

   (i.e., that generated by "div1").

 </div>

 <!-- End section: Containing blocks -->

 <h2 id="nf">

 <dfn>Normal Flow</dfn></h2>

   Boxes in the normal flow belong to a formatting context, which may be block or

   inline, but not both simultaneously. See the CSS Basic Box Model module

   [[!CSS3BOX]] for further details about <a href="http://www.w3.org/TR/CSS2/visuren.html#normal-flow">normal flow</a>.

 <!-- End section: Normal Flow -->

 <h2 id="floats">

 <dfn lt="float|floated box|floating box">Floats</dfn></h2>

   A float is a box that is positioned within content, often left or right on the

   current line. The most interesting characteristic of a float (or "floated" or

   "floating" box) is that inline-level content may flow along its side (or be

   prohibited from doing so by the 'clear' property) or around the floated box.

   See the CSS 2.1 [[!CSS21]]<!--CSS Floats module [[!CSS3FLOATS]]--> for details

   about <a href="http://www.w3.org/TR/CSS2/visuren.html#floats">floating boxes</a>.

 <!-- End section: Floats -->

 <h2 id="pos-sch">

 <dfn>Positioning schemes</dfn></h2>

   In CSS, a box may be laid out according to three positioning schemes:

   <ol>

     <li>

     Normal flow<br>

     In CSS, <a>normal flow</a> 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 <a lt="relative positioning" spec="css21">relative</a> and <a lt="sticky positioning">sticky</a> positioning of block-level and inline-level boxes.

     <li>

     Floats<br>

     In the <a>float</a> model, a box is first laid out according to the <a>normal flow</a>, then taken

     out of the flow and positioned, typically to the left or right. Content may flow

     along the side of a <a>float</a>.

     <li>

     Absolute positioning<br>

     In the absolute positioning model, a box is removed from the <span>normal

     flow</span> entirely (it has no impact on later siblings) and assigned a

      position with respect to a <a>containing block</a>.

   </ol>

   An element is called <em>out-of-flow</em> if it is <a>floated</a>, absolutely positioned, or is the root element. An element is called

   <em>in-flow</em> if it is not out-of-flow. The <em>flow of an element</em>

   A is the set consisting of A and all in-flow elements whose nearest

   out-of-flow ancestor is A.

 <h3 id="rel-pos">

 Relative positioning</h3>

   Once a box has been laid out according to the <a>normal flow</a> or

   <a>floated</a>, it may be offset relative to this position.

   This is called <dfn export lt="relative position|relatively position|relpos">relative positioning</dfn>. Offsetting a box (B1) in this way has no

   effect on the box (B2) that follows: B2 is given a position as if B1 were not

   offset and B2 is not re-positioned after B1’s offset is applied. This

   implies that relative positioning may cause boxes to overlap. However, if

   relative positioning causes an 'overflow: auto' or 'overflow: scroll' box to

   have overflow, the user agent must allow the user to access this content (at

   its offset position), which, through the creation of a scrolling mechanism,

   may affect layout.

   A relatively positioned box keeps its <a>normal flow</a> size, including

   line breaks and the space originally reserved for it.

   A relatively positioned box establishes a new a new <a>containing block</a> for

   absolutely positioned descendants. (This is a common use of relatively positioned

   boxes.) The section on <a>containing blocks</a>

   explains when a relatively positioned box establishes a new <a>containing block</a>.

   For relatively positioned elements, 'left' and 'right' move the box(es) horizontally,

   without changing their size. 'Left' moves the boxes to the right, and 'right' moves

   them to the left. Since boxes are not split or stretched as a result of 'left' or

   'right', the used values are always: left = -right.

   If both 'left' and 'right' are <css>auto</css> (their initial values), the used values

   are ''0'' (i.e., the boxes stay in their original position).

   If 'left' is <css>auto</css>, its used value is minus the value of 'right' (i.e., the

   boxes move to the left by the value of 'right').

   If 'right' is specified as <css>auto</css>, its used value is minus the value of 'left'.

   If neither 'left' nor 'right' is <css>auto</css>, the position is over-constrained, and

   one of them has to be ignored. If the 'direction' property of the <a>containing

   block</a> is ''ltr'', the value of 'left' wins and 'right' becomes -'left'.

   If 'direction' of the containing block is ''rtl'', 'right' wins and 'left' is

   ignored.

 <div class="example">

   The following three rules are equivalent:

 <pre><code class="css">

 div.a8 { position: relative; direction: ltr; left: -1em; right: auto }

 div.a8 { position: relative; direction: ltr; left: auto; right: 1em }

 div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

 </code></pre>

 </div>

   The 'top' and 'bottom' properties move relatively positioned element(s) up or

   down without changing their size. 'Top' moves the boxes down, and 'bottom' moves

   them up. Since boxes are not split or stretched as a result of 'top' or 'bottom',

   the used values are always: top = -bottom.

   If 'top' and 'bottom' are <css>auto</css>, their used values are both ''0''.

   If one of them, 'top' or 'bottom', is <css>auto</css>, the <css>auto</css> value becomes the

   negative of the other.

   If neither 'top' and 'bottom' is <css>auto</css>, 'bottom' is ignored (i.e., the used

   value of 'bottom' will be minus the value of 'top').

   <p class="note">

     Note, Although relative positioning could be used as a form of superscripting

     and subscripting, the line height is not automatically adjusted to take the

     positioning into consideration. See the description of <a href="http://www.w3.org/TR/CSS2/visudet.html#line-height">line height calculations</a> for more

     information.

   </p>

   Examples of relative positioning are provided in the section comparing <a>normal

   flow</a>, <a>floats</a>, and absolute positioning.

 <!-- End section: Relative positioning  -->

 <h3 id="sticky-pos">

 Sticky positioning</h3>

   A <dfn export lt="sticky position|stickily position|stickypos">stickily positioned</dfn> box is positioned similarly to a <a>relatively

   positioned</a> box, but the offset is computed with reference to the nearest

   ancestor with a <a>scrolling box</a>, or the viewport if no ancestor has

   a <a>scrolling box</a>.

   Specifically, once a box has been laid out according to the <a>normal flow</a>

   or <a>floated</a>, its sticky offset is computed as described

   below. Offsetting a box (B1) in this way has no effect on the box (B2) that

   follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned

   after B1’s offset is applied. This implies that sticky positioning may cause

   boxes to overlap. However, if sticky positioning causes an ''overflow: auto'' or

   ''overflow: scroll'' box to have overflow, the user agent must allow the user to

   access this content (at its offset position), which, through the creation of a

   scrolling mechanism, may affect layout.

   A stickily positioned box keeps its <a>normal flow</a> size, including  line

   breaks and the space originally reserved for it.

   A stickily positioned box establishes a new a new <a>containing block</a> for

   absolutely positioned descendants, just as relative positioning does. The section

   on <a>containing blocks</a> explains when a

   stickily positioned box establishes a new <a>containing block</a>.

   For stickily positioned elements, 'left', 'right', 'top' and 'bottom' are

   offsets from the respective edges of its flow box which are used to constrain

   the element's offset. Percentage values of 'left' and 'right' refer to the

   width of its flow box; percentage values of 'top' and 'bottom' refer to the

   height of its flow box.

   <p class="issue">

     Describe which element font-size-relative units are resolved against

   </p>

   The offset of a stickily positioned box is computed as follows:

 <ol>

   <li>

   A rectangle is computed relative to the containing block of the stickily

   positioned element, by insetting its flow box rectangle on each side by offsets

   computed from the 'left', 'right', 'top' and 'bottom' properties of the stickily

   positioned element.

   <p class="issue">

     Say what happens if this rectangle is empty

   </p>

   <li>

   The intersection is taken between the resulting rectangle, and the containing

   block of the stickily positioned element. The result, termed the the

   <em>sticky-constraint rectangle</em>, is a rectangle used to constrain the

   location of the stickily positioned element.

   <li>

   If the stickily positioned element's 'top' style is not <css>auto</css>, and the stickily

   positioned element projects above the top of the <em>sticky-constraint

   rectangle</em>, the stickily positioned element is moved down until it is fully

   contained in the <em>sticky-constraint rectangle</em>.

   <li>

   If the stickily positioned element's 'bottom' style is not <css>auto</css>, and the stickily

   positioned element projects below the bottom of the <em>sticky-constraint

   rectangle</em>, the stickily positioned element is moved up until it is fully

   contained in the <em>sticky-constraint rectangle</em>.

   <li>

   If the stickily positioned element's 'left' style is not <css>auto</css>, and the stickily

   positioned element projects outside the left of the <em>sticky-constraint

   rectangle</em>, the stickily positioned element is moved right until it is fully

   contained in the <em>sticky-constraint rectangle</em>.

   <li>

   If the stickily positioned element's 'right' style is not <css>auto</css>, and the stickily

   positioned element projects outside the right of the <em>sticky-constraint

   rectangle</em>, the stickily positioned element is moved left until it is fully

   contained in the <em>sticky-constraint rectangle</em>.

 </ol>

   When computing containement of the stickily positioned element within its

   containing block, margins on the stickily positioned element are taken into

   account.

   <p class="issue">

     Say what happens if it already overflows the containing block

   </p>

   <p class="issue">

     Do marins collapse between the stickily positioned element and its containing

     block element?

   </p>

   Intersection between the stickily positioned element and the bottom of the

   <em>sticky-constraint rectangle</em> limits movement in any direction, so the

   offset never pushes the stickily positioned element outside of its containing

   block. However, when the element is free to move within its containing block

   as the page is scrolled, it appears to be pinned to the relevant flow root

   edges, similarly to a fixed position element.

   <p class="note">

     Note that a stickily positioned element with non-auto 'top' style and auto

     'bottom' style will only ever be pushed down by sticky positioning; it will

     never be offset upwards.

   </p>

   <p class="note">

     Multiple stickily positioned elements in the same container are offset

     independently. Sticky position offsets may cause them to overlap.

   </p>

   <p class="issue">

     Does the margin on the stickily positioned element affect its distance from

     the flow root edge?

   </p>

   <p class="issue">

     Sticky positioning should really be defined in terms of the nearest scrollable

     ancestor, but there is currently no such term defined elsewhere in CSS. CSSOM

     View refers to "scrolling boxes." CSS Overflow has yet to pull in the relevant

     text from CSS Box, and CSS Box has an old, confusing definition of "flow root"

     which is almost (but probably not quite) what we want here. This spec refers

     to "flow root," since that's the closest thing currently specced somewhere,

     but this is not optimal.

   </p>

 <div class=example>

   The following example is the same as the previous one, but now it is explained:

   <pre>EM { font-style: italic }</pre>

 </div>

 <!-- End section: Sticky positioning  -->

 <h3 id="abs-pos">

 Absolute positioning</h3>

   In the absolute positioning model, a box is explicitly offset with respect to

   its <a>containing block</a>. It is removed from the <a>normal flow</a> entirely

   (it has no impact on later siblings). An absolutely positioned box establishes

   a new <a>containing block</a> for normal flow children and absolutely (but not

   fixed) positioned descendants. However, the contents of an absolutely

   positioned element do not flow around any other boxes. They may obscure the

   contents of another box (or be obscured themselves), depending on the stack

   levels of the overlapping boxes.

   References in this specification to an absolutely positioned element (or its

   box) imply that the element’s 'position' property has the value

   ''absolute'' or ''fixed''.

 <!-- End section: Absolute positioning -->

 <h3 id="fixed-pos">

 Fixed positioning</h3>

   Fixed positioning is similar to absolute positioning. The only difference is

   that for a fixed positioned box, the <a>containing block</a> is established

   by the <a>viewport</a>. For <a href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a>,

   fixed boxes do not move when the document is scrolled. In this respect, they are similar

   to <a href="http://www.w3.org/TR/CSS2/colors.html#background-properties">fixed background images</a>.

   For <a href="http://www.w3.org/TR/CSS2/media.html#paged-media-group">paged

   media</a>, boxes with fixed positions are repeated on every page. This is useful

   for placing, for instance, a signature at the bottom of each page. Boxes with

   fixed position that are larger than the page area are clipped. Parts of the

   fixed position box that are not visible in the <span>initial containing

   block</span> will not print.

 <div class="example">

   Authors may use fixed positioning to create the following presentation:

   <figure>

     <img src="images/frame.png" alt="Example of frame layout">

     <figcaption>

       A page layout with a static header and footer at the top and bottom,

       a sidebar to one side,

       and main content filling the remaining center space.

     </figcaption>

   </figure>

   This might be achieved with the following HTML document and style rules:

   <pre class="lang-html">

   <!DOCTYPE html>

   <html>

     <head>

       <title>A frame document with CSS</title>

       <style type="text/css" media="screen">

         body { height: 8.5in } /* Required for percentage heights below */

         #header {

           position: fixed;

           width: 100%;

           height: 15%;

           top: 0;

           right: 0;

           bottom: auto;

           left: 0;

         }

         #sidebar {

           position: fixed;

           width: 10em;

           height: auto;

           top: 15%;

           right: auto;

           bottom: 100px;

           left: 0;

         }

         #main {

           position: fixed;

           width: auto;

           height: auto;

           top: 15%;

           right: 0;

           bottom: 100px;

           left: 10em;

         }

         #footer {

           position: fixed;

           width: 100%;

           height: 100px;

           top: auto;

           right: 0;

           bottom: 0;

           left: 0;

         }

       </style>

     </head>

     <body>

       <div id="header"> ...  </div>

       <div id="sidebar"> ...  </div>

       <div id="main"> ...  </div>

       <div id="footer"> ...  </div>

     </body>

   </html>

   </pre>

 </div>

 <!-- End section: Fixed positioning -->

 <!-- End section: Positioning schemes -->

 <h3 id="position-property">

 Choosing a positioning scheme: 'position' property</h3>

   The 'position' property determines which of the positioning algorithms is used to

   calculate the position of a box.

   <pre class="propdef">

   Name: position

   Value: static | relative | absolute | sticky | fixed

   Initial: static

   Applies to: all elements except table-column-group and table-column

   Inherited: no

   Animatable: no

   Percentages: N/A

   Media: visual

   Computed value: specified value

   </pre>

   The values of this property have the following meanings:

 <dl dfn-for="position" dfn-type="value">

   <dt><dfn>static</dfn></dt>

   <dd>

     The box is a normal box, laid out according to the <a>normal flow</a>. The

     'top', 'right', 'bottom', and 'left' properties do not apply.

   <dt><dfn>relative</dfn></dt>

   <dd>

     The box’s position is calculated according to the <a>normal flow</a> (this

     is called the position in <a>normal flow</a>). Then the box is offset relative

     to its normal position and in all cases, including table elements, does not affect

     the position of any following boxes. When a box B is relatively positioned, the

     position of the following box is calculated as though B were not offset. The effect

     of ''position: relative'' on table elements is defined as follows:

     <ul>

       <li>

       table-row-group, table-header-group, table-footer-group and table-row offset

       relative to its normal position within the table. If table-cells span

       multiple rows, only the cells originating in the <a>relative positioned</a> row is

       offset.

       <li>

       table-column-group, table-column do not offset the respective column and has

       no visual affect when 'position': ''relative'' is applied.

       <li>

       table-caption and table-cell offset relative to its normal position within

       the table. If a table cell spans multiple columns or rows the full spanned

       cell is offset.

     </ul>

   <dt><dfn>absolute</dfn></dt>

   <dd>

     The box’s position (and possibly size) is specified with the 'top', 'right',

     'bottom', and 'left' properties. These properties specify offsets with respect

     to the box’s <a>containing block</a>. Absolutely positioned boxes

     are taken out of the normal flow. This means they have no impact on the layout

     of later siblings. Though absolutely positioned boxes may have margins, those

     margins do not <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">

     collapse</a> with any other margins.

   <dt><dfn>sticky</dfn></dt>

   <dd>

     The box’s position is calculated according to the <a>normal flow</a>

     (this is called the position in <a>normal flow</a>). Then the box is offset

     relative to its flow root and containing block and in all cases, including

     table elements, does not affect the position of any following boxes. When a

     box B is stickily positioned, the position of the following box is calculated

     as though B were not offset. The effect of 'position': ''sticky'' on table

     elements is the same as for 'position': ''relative''

   <dt><dfn>fixed</dfn></dt>

   <dd>

     The box’s position is calculated according to the "absolute" model, but

     in addition, the box is fixed with respect to some reference. As with the

     "absolute" model, the box’s margins do not collapse with any other margins.

     In the case of handheld, projection, screen, tty, and tv media types, the box

     is fixed with respect to the <a>viewport</a> and does not move when scrolled.

     In the case of the print media type, the box is rendered on every page, and

     is fixed with respect to the page box, even if the page is seen through a

     <a>viewport</a> (in the case of a print-preview, for example). For other media

     types, the presentation is undefined. Authors may wish to specify ''fixed''

     in a media-dependent way. For instance, an author may want a box to remain at

     the top of the <a>viewport</a> on the screen, but not at the top of each printed

     page. The two specifications may be separated by using an <a href="http://www.w3.org/TR/CSS2/media.html#at-media-rule">'@media'</a>

     rule, as in:

     <div class="example">

 <pre><code class="css">

 @media screen {

     h1#first { position: fixed }

 }

 @media print {

     h1#first { position: static }

 }

 </code></pre>

     </div>

     User agents must not paginate the content of fixed boxes.

     <p class="note">

       Note that user agents may print invisible content in other ways. See

       <a href="http://www.w3.org/TR/CSS2/page.html#outside-page-box">"Content outside the page box"</a>.

     </p>

   </dd>

 </dl>

   In previous versions of CSS user agents may treat position ''fixed'' as ''static''

   on the root element. This specification removes that option and it is now required

   that newer user agents treat ''fixed'' value on the root element as defined for

   all other elements.

 <!-- End section: Choosing a positioning scheme: 'position' property -->

 <h3 id="box-offsets-trbl">

 Box offsets: 'top', 'right', 'bottom', 'left'</h3>

   An element is said to be <a>positioned</a> if its 'position' property has a value other than ''static''.

   Positioned elements generate positioned boxes, and may be laid out according

   to the following four physical properties:

   <pre class="propdef">

   Name: top

   Value: auto | <length> | <percentage>

   Initial: auto

   Applies to: positioned elements

   Inherited: no

   Animatable: <length>, <percentage>

   Percentages: refer to height of <a>containing block</a>

   Media: visual

   Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''top/auto''.<br/> Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''top/auto''.

   </pre>

   This property specifies how far an absolutely positioned box’s top margin

   edge is offset below the top edge of the box’s <a>containing block</a>.

   For relatively positioned boxes, the offset is with respect to the top edge of

   the box itself (i.e., the box is given a position in the <a>normal flow</a>,

   and then offset from that position according to this property).

   For stickily positioned boxes, the value is used to compute the <em>sticky-constraint

   rectangle</em> as described in Sticky positioning.

   For absolutely positioned elements whose <a>containing

   block</a> is based on a block-level element, this property is an offset from

   the padding edge of that element.

   <pre class="propdef">

   Name: right

   Value: auto | <length> | <percentage>

   Initial: auto

   Applies to: positioned elements

   Inherited: no

   Animatable: <length>, <percentage>

   Percentages: refer to height of <a>containing block</a>

   Media: visual

   Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''right/auto''.<br/> Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''right/auto''.

   </pre>

   Similar to 'top', but specifies how far a box’s right margin edge is offset

   to the left of the right edge of the box’s <a>containing block</a>.

   For relatively positioned boxes, the offset is with respect to the right edge

   of the box itself (i.e., the box is given a position in the <a>normal flow</a>,

   and then offset from that position according to this property).

   For stickily positioned boxes, the value is used to compute the <em>sticky-constraint

   rectangle</em> as described in Sticky positioning.

   For absolutely positioned elements whose <a>containing

   block</a> is based on a block-level element, this property is an offset from

   the padding edge of that element.

   <pre class="propdef">

   Name: bottom

   Value: auto | <length> | <percentage>

   Initial: auto

   Applies to: positioned elements

   Inherited: no

   Animatable: <length>, <percentage>

   Percentages: refer to height of <a>containing block</a>

   Media: visual

   Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''bottom/auto''.<br/> Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''bottom/auto''.

   </pre>

   Similar to 'top', but specifies how far a box’s bottom margin edge is offset

   above the bottom edge of the box’s <a>containing block</a>.

   For relatively positioned boxes, the offset is with respect to the bottom edge

   of the box itself (i.e., the box is given a position in the <a>normal flow</a>,

   and then offset from that position according to this property).

   For stickily positioned boxes, the value is used to compute the <em>sticky-constraint

   rectangle</em> as described in Sticky positioning.

   For absolutely positioned elements whose <a>containing

   block</a> is based on a block-level element, this property is an offset from

   the padding edge of that element.

   <pre class="propdef">

   Name: left

   Value: auto | <length> | <percentage>

   Initial: auto

   Applies to: positioned elements

   Inherited: no

   Animatable: <length>, <percentage>

   Percentages: refer to height of <a>containing block</a>

   Media: visual

   Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''left/auto''. Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''left/auto''.

   </pre>

   Similar to 'top', but specifies how far a box’s left margin edge is offset

   to the right of the left edge of the box’s <a>containing block</a>.

   For relatively positioned boxes, the offset is with respect to the left edge of

   the box itself (i.e., the box is given a position in the <a>normal flow</a>,

   and then offset from that position according to this property).

   For stickily positioned boxes, the value is used to compute the <em>sticky-constraint

   rectangle</em> as described in Sticky positioning.

   For absolutely positioned elements whose <a>containing

   block</a> is based on a block-level element, this property is an offset from

   the padding edge of that element.

   The values for the four properties have the following meanings:

 <dl dfn-for="top,right,bottom,left, offset-start, offset-end, offset-before, offset-after" dfn-type="value">

   <dt><dfn>&lt;length></dfn>

   <dd>

     The offset is a fixed distance from the reference edge. Negative values are

     allowed.

   <dt><dfn>&lt;percentage></dfn>

   <dd>

     The offset is a percentage of the <a>containing block’s</a> width (for 'left' or 'right')

     or height (for 'top' and 'bottom').

     For stickily positioned elements, the offset is a percentage of the flow root's

     width (for 'left' or 'right') or height (for 'top' or 'bottom').

     Negative values are allowed.

   <dt><dfn>auto</dfn></dt>

   <dd>

     For non-replaced elements, the effect of this value depends on which of related

     properties have the value ''top/auto'' as well. See the sections on the

     'width' and 'height' of absolutely positioned, non-replaced elements for details.

     For replaced elements, the effect of this value depends only on the intrinsic

     dimensions of the replaced content. See the sections on the 'width' and 'height'

     of absolutely positioned, replaced elements for details.

 </dl>

   <p class="note">

     Note, for fixed positioned elements using large values or

     negative values may easily move elements outside the <a>viewport</a> and make the

     contents unreachable through scrolling or other means. Authors should be aware that

     fixed position elements are always relative to the <span>initial

     containing block</span>.

   </p>

 <!-- End section: Box offsets: 'top', 'right', 'bottom', 'left'  -->

 <h3 id="logical-box-offsets-beaso">

 Logical box offsets: 'offset-before', 'offset-end', 'offset-after' and 'offset-start'</h3>

   Logical offset properties allow for offseting positioned boxes based on the

   'writing-mode' and 'direction' properties. When both the physical property and

   equivalent logical property (based on 'writing-mode' and 'direction') are

   specified the physical property computes to the computed value of the coresponding

   logical property.

   Positioned elements generate positioned boxes, and may be laid out according to

   the following four logical properties taking into account the 'writing-mode'

   and 'direction' of the <a>containing block</a>:

   <pre class="propdef">

     Name: offset-before, offset-after, offset-start, offset-end

     Value: auto | <length> | <percentage>

     Initial: auto

     Applies to: positioned elements

     Inherited: no

     Animatable: <length>, <percentage>

     Percentages: refer to height of <a>containing block</a>

     Media: visual

     Computed value: For ''position: relative'', see Relative positioning.<br/> For ''position: sticky'', see Sticky positioning.<br/> For ''position: static'', ''top/auto''.<br/> Otherwise: if specified as a <<length>>, the corresponding absolute length; if specified as a <<percentage>>, the specified value; otherwise, ''top/auto''.

   </pre>

   For an absolutely positioned box this property specifies how far the coresponding

   margin edge is offset from the coresponding physical reference edge of the box’s

   <a>containing block</a>.

   The partiucular physical reference edge that is used when offsetting is based

   on the 'writing-mode' and 'direction' properties.

   The combination of the 'writing-mode' and 'direction' properties determine the

   appropriate physical reference edge for offsetting.

   The table below shows logical offset properties (per 'writing-mode' and

   'direction') and the physical reference edge from which the offset will occur.

   <div class="figure">

     <table id="logical-physical-relations" class="lpr">

       <thead>

         <tr>

           <th colspan="2" rowspan="2"></th>

           <td colspan="6">'writing-mode' / 'direction'</td>

         </tr>

         <tr>

           <td>horizontal-tb / ltr</td>

           <td>horizontal-tb / rtl</td>

           <td>vertical-rl / ltr</td>

           <td>vertical-rl / rtl</td>

           <td>vertical-lr / ltr</td>

           <td>vertical-lr / rtl</td>

         </tr>

       </thead>

       <tbody>

         <tr>

           <td rowspan="4"><div>Edge</div></td>

           <td>top</td>

           <td>offset-before</td>

           <td>offset-before</td>

           <td>offset-start</td>

           <td>offset-end</td>

           <td>offset-start</td>

           <td>offset-end</td>

         </tr>

         <tr>

           <td>right</td>

           <td>offset-end</td>

           <td>offset-start</td>

           <td>offset-before</td>

           <td>offset-before</td>

           <td>offset-after</td>

           <td>offset-after</td>

         </tr>

         <tr>

           <td>bottom</td>

           <td>offset-after</td>

           <td>offset-after</td>

           <td>offset-end</td>

           <td>offset-start</td>

           <td>offset-end</td>

           <td>offset-start</td>

         </tr>

         <tr>

           <td>left</td>

           <td>offset-start</td>

           <td>offset-end</td>

           <td>offset-after</td>

           <td>offset-after</td>

           <td>offset-before</td>

           <td>offset-before</td>

         </tr>

       </tbody>

     </table>

     <p class="caption">

       Relationship of physical offset edges and the logical properties per

       'writing-mode' and 'direction'.

     </p>

   </div>

   <p class="issue">The logical property definitions should move to the Logical Properties module.</p>

   For relatively positioned boxes, the offset is with respect to the property’s

   coresponding physical reference edge of the box itself (i.e., the box is given a

   position in the <a>normal flow</a>, and then offset from that position according

   to the property).

   <p class="issue">This needs to be defined for sticky positioning.</p>

   For absolutely positioned elements whose <a>containing block</a>

   is based on a block-level element, this property is an offset from the coresponding

   padding edge of that element.

   <p class="note">

     Note, for fixed positioned elements using large values or

     negative values may easily move elements outside the <a>viewport</a> and make the

     contents unreachable through scrolling or other means. Authors should be aware that

     fixed position elements are always relative to the <span>initial

     containing block</span>.

   </p>

 <h2 id="position-root">

 Choosing a different containing block for positioning</h2>

 <h3 id="attachment-properties">

 Attachment properties: 'attachment-type', 'attachment-top', 'attachment-right', 'attachment-bottom', 'attachment-left', and 'attachment'</h3>

 <!--

 <h3 id="position-root">Choosing a different containing block for positioning: 'position-reference' property</h3>

 The 'position-reference' property determines what element to use as a containing block for the current element.

 <pre class='propdef'>

 Name: position-reference

 Value: auto | parent(<<number>>) | container | root | page | viewprot | element()

 Initial: auto

 Applies to: positioned elements

 Inherited: no

 Animatable: no

 Percentages: n/a

 Media: visual

 Computed value: specified value, but see prose

 </pre>

 The values of this property have the following meanings:

 <dl dfn-type=value dfn-for=position-reference>

     <dt><dfn>auto</dfn></dt>

     <dd>

     </dd>

     <dt><dfn>parent(<<number>>)</dfn></dt>

     <dd>

         Use the parent element as the <a>containing block</a> for the positioned element.

         Issue: What's the <<number>> for???

     </dd>

     <dt><dfn>container</dfn></dt>

     <dd>

         Use the container as the <span>containing box</span>.<br>

         In the case of multi-column layout the individual column defines the containing

         block even though the individual column is not an actual element "block box". If

         not inside a multi-column element then this value computes to ''position-reference/auto''.

     </dd>

     <dt><dfn>root</dfn></dt>

     <dd>

         Use the root element (for HTML and XHTML the html element) as the <a>containing block</a> for the positioned element.

     </dd>

     <dt><dfn>nth-parent()</dfn></dt>

     <dd>

         <p class="issue">

             Inserting and removing elements from the tree may cause odd behavior with

             'nth-parent()'. Is this really a good concept?

     </dd>

     <dt><dfn>element()</dfn></dt>

     <dd>

         <p class="issue">

             Inserting and removing elements from the tree may cause odd behavior with

             'element()'. Is this really a good concept?

         </p>

     </dd>

 </dl>

 -->

   <p class="issue">

     Ideas have been raised to allow changing the positioning containing block or

     allowing positioning and sizing to use different containing blocks.

   </p>

 <!-- End section: Choosing a different containing block for positioning: 'position-reference' property -->

 <h2 id="size-and-position-details">

 Sizing and positioning details</h2>

 <h3 id="abs-non-replaced-width">

 The width of absolute or fixed positioned, non-replaced elements</h3>

   The constraint that determines the used values for these elements is:

   <code>

     'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' +

     'padding-right' + 'border-right-width' + 'margin-right' +

     'right' = width of containing block

  </code>

   If all three of 'left', 'width', and 'right' are ''left/auto'': First set any ''margin/auto'' values

   for 'margin-left' and 'margin-right' to ''0''. Then, if the 'direction' property of the

   element establishing the static-position <a>containing block</a> is ''ltr'' set

   'left' to the static position and apply rule number <em>three</em> below; otherwise, set

   'right' to the static-position and apply rule number <em>one</em> below.

   If none of the three is ''left/auto'': If both 'margin-left' and 'margin-right' are ''margin/auto'',

   solve the equation under the extra constraint that the two margins get equal values,

   unless this would make them negative, in which case when direction of the containing

   block is ''ltr'' (''rtl''), set 'margin-left' ('margin-right') to ''0'' and solve for

   'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is ''margin/auto'',

   solve the equation for that value. If the values are over-constrained, ignore the value

   for 'left' (in case the 'direction' property of the <a>containing block</a> is

   ''rtl'') or 'right' (in case 'direction' is ''ltr'') and solve for that value.

   Otherwise, set ''margin/auto'' values for 'margin-left' and 'margin-right' to ''0'', and pick

   one of the following six rules that apply.

   <ol>

     <li>

     If 'left' and 'width' are ''left/auto'' and 'right' is not ''right/auto'', then the width is

     shrink-to-fit. Then solve for 'left'.

     <li>

     If 'left' and 'right' are ''left/auto'' and 'width' is not ''width/auto'', then if the

     'direction' property of the element establishing the static-position

     <a>containing block</a> is ''ltr'' set 'left' to the static-position,

     otherwise set 'right' to the static-position. Then solve for 'left' (if 'direction

     is ''rtl'') or 'right' (if 'direction' is ''ltr'').

     <li>

     If 'width' and 'right' are ''width/auto'' and 'left' is not ''left/auto'', then the width is

     shrink-to-fit. Then solve for 'right'.

     <li>

     If 'left' is ''left/auto'', 'width' and 'right' are not ''width/auto'', then solve for 'left'.

     <li>

     If 'width' is ''width/auto'', 'left' and 'right' are not ''left/auto'', then solve for 'width'.

     <li>

     If 'right' is ''right/auto'', 'left' and 'width' are not ''left/auto'', then solve for 'right'.

   </ol>

 <table class=data id='abspos-auto'>

   <style scoped>

   #abspos-auto ul { list-style-type: none; margin: 0; }

   #abspos-auto caption { caption-side: bottom; }

   </style>

   <caption>

     Summary of rules for <code>dir=ltr</code> in horizontal writing modes

   </caption>

   <colgroup span=5></colgroup>

   <colgroup span=1></colgroup>

   <thead>

     <tr>

       <th colspan=5>Is auto?

       <th rowspan=2>Result

     <tr>

       <th>'left'

       <th>'width'

       <th>'right'

       <th>'margin-left'

       <th>'margin-right'

   <tbody>

     <tr>

       <td>✔

       <td>✔

       <td>✔

       <td colspan=2>any

       <td>

         <ul>

           <li>auto margins → zero

           <li>left → static pos

           <li>width → shrink-to-fit

           <li>right → solve

         </ul>

     <tr>

       <td rowspan=4>✘

       <td rowspan=4>✘

       <td rowspan=4>✘

       <td>✔

       <td>✘

       <td rowspan=2>

         auto margin → free space

     <tr>

       <td>✘

       <td>✔

     <tr>

       <td>✔

       <td>✔

       <td>

         <ul>

           <li>margins split positive free space

           <li>right margin gets negative free space

         </ul>

     <tr>

       <td>✘

       <td>✘

       <td>

         treat 'right' as ''right/auto''

     <tr>

       <td>✔

       <td>✘

       <td>✔

       <td colspan=2>any

       <td>

         <ul>

           <li>auto margins → zero

           <li>left → static pos

           <li>width → as specified

           <li>right → solve

         </ul>

     <tr>

       <td>✔

       <td>✔

       <td>✘

       <td colspan=2>any

       <td>

         <ul>

           <li>auto margins → zero

           <li>left → solve

           <li>width → shrink-to-fit

           <li>right → as specified

         </ul>

     <tr>

       <td>✘

       <td>✔

       <td>✔

       <td colspan=2>any

       <td>

         <ul>

           <li>auto margins → zero

           <li>left → as specified

           <li>width → shrink-to-fit

           <li>right → solve

         </ul>

     <tr>

       <td>✔

       <td>✘

       <td>✘

       <td colspan=2 rowspan=3>any

       <td rowspan=3>

         <ul>

           <li>auto margins → zero

           <li>solve for auto

         </ul>

     <tr>

       <td>✘

       <td>✘

       <td>✔

     <tr>

       <td>✘

       <td>✔

       <td>✘

 </table>

 <!-- End section: The width of absolute or fixed positioned, non-replaced element -->

 <h3 id="abs-replaced-width">

 The width of absolute or fixed positioned, replaced elements</h3>

   If 'height' and 'width' both have computed values of <css>auto</css> and the element also has an

   intrinsic width, then that intrinsic width is the used value of 'width'.

   If 'height' and 'width' both have computed values of <css>auto</css> and the element has no

   intrinsic width, but does have an intrinsic height and intrinsic ratio; or if 'width'

   has a computed value of <css>auto</css>, 'height' has some other computed value, and the element

   does have an intrinsic ratio; then the used value of 'width' is:

   <code>(used height) * (intrinsic ratio)</code>

   If 'height' and 'width' both have computed values of <css>auto</css>, the element has an

   intrinsic ratio but no intrinsic height or width, and the <a>containing block’s</a> width does

   not itself depend on the replaced element’s width, then the used value of 'width' is

   calculated from the constraint equation used for

   <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">block-level, non-replaced elements in <a>normal flow</a></a>.

   Otherwise, if 'width' has a computed value of <css>auto</css>, and the element has an intrinsic

   width, then that intrinsic width is the used value of 'width'.

   Otherwise, if 'width' has a computed value of <css>auto</css>, but none of the conditions above

   are met, and then the used value of 'width' becomes ''300px''. If ''300px'' is too wide

   to fit the device, user agents should use the width of the largest rectangle that has a

   2:1 ratio and fits the device instead.

   After establishing the 'width', in order to position the replaced element, apply the

   following rules as appropriate.

   <ol>

     <li>

     If both 'left' and 'right' have the value <css>auto</css>, and if the 'direction' property

     of the element establishing the static-position <a>containing block</a> is

     ''ltr'', set 'left' to the static position and solve for 'right'; else if

     'direction' is ''rtl'', set 'right' to the static position and solve for 'left'.

     <li>

     If 'left' is <css>auto</css> and 'right' is not <css>auto</css>, replace any <css>auto</css> on

     'margin-left' or 'margin-right' with ''0'', then solve for 'left'.

     <li>

     If 'right' is <css>auto</css> and 'left' is not <css>auto</css>, replace any <css>auto</css> on

     'margin-left' or 'margin-right' with ''0'', then solve for 'right'.

     <li>

     If at this point both 'margin-left' and 'margin-right' are still <css>auto</css>, solve the

     equation under the extra constraint that the two margins must get equal values,

     unless this would make them negative, in which case when the direction of the

     <a>containing block</a> is ''ltr'' (''rtl''), set 'margin-left'

     ('margin-right') to ''0'' and solve for 'margin-right' ('margin-left').

     <li>

     If at this point there is an <css>auto</css> remaining, solve the equation for that value.

     <li>

     If at this point the values are over-constrained, ignore the value for either 'left'

     (in case the 'direction' property of the <a>containing block</a> is ''rtl'')

     or 'right' (in case 'direction' is ''ltr'') and solve for that value.

   </ol>

 <!-- End section: The width of absolute or fixed positioned, replaced element -->

 <h3 id="abs-non-replaced-height">

 The height of absolute or fixed positioned, non-replaced elements</h3>

   For absolutely positioned elements, the used values of the vertical dimensions must

   satisfy this constraint:

   <code>

     'top' + <span>'margin-top'</span> + <span>'border-top-width'</span> + <span>'padding-top'</span> + 'height' +

     <span>'padding-bottom'</span> + <span>'border-bottom-width'</span> + <span>'margin-bottom'</span> + 'bottom'

     = <span>height of containing block</span>

   </code>

   If all three of 'top', 'height', and 'bottom' are <css>auto</css>: First set any <css>auto</css>

   values for 'margin-top' and 'margin-bottom' to ''0'', then set 'top' to the static

   position, and finally apply rule number <em>three</em> below.

   If none of the three are <css>auto</css>: If both 'margin-top' and 'margin-bottom' are <css>auto</css>,

   solve the equation under the extra constraint that the two margins get equal values. If

   one of 'margin-top' or 'margin-bottom' is <css>auto</css>, solve the equation for that value. If

   the values are over-constrained, ignore the value for 'bottom' and solve for that value.

   Otherwise, set <css>auto</css> values for 'margin-top' and 'margin-bottom' to ''0'', and pick

   one of the following six rules that apply.

   <ol>

     <li>

     If 'top' and 'height' are <css>auto</css> and 'bottom' is not <css>auto</css>, then the height is

     based on the <a href="#root-height">Auto heights for block formatting context

     roots</a>, and solve for 'top'.

     <li>

     If 'top' and 'bottom' are <css>auto</css> and 'height' is not <css>auto</css>, then set 'top' to

     the static position, then solve for 'bottom'.

     <li>

     If 'height' and 'bottom' are <css>auto</css> and 'top' is not <css>auto</css>, then the height is

     based on the <a href="#root-height">Auto heights for block formatting context

     roots</a>, and solve for 'bottom'.

     <li>

     If 'top' is <css>auto</css>, 'height' and 'bottom' are not <css>auto</css>, then solve for 'top'.

     <li>

     If 'height' is <css>auto</css>, 'top' and 'bottom' are not <css>auto</css>, then solve for 'height'.

     <li>

     If 'bottom' is <css>auto</css>, 'top' and 'height' are not <css>auto</css>, then solve for 'bottom'.

   </ol>

 <!-- End section: The height of absolute or fixed positioned, non-replaced element -->

 <h3 id="abs-replaced-height">

 The height of absolute or fixed positioned, replaced elements</h3>

   If 'height' and 'width' both have computed values of <css>auto</css> and the element also has an

   intrinsic height, then that intrinsic height is the used value of 'height'.

   Otherwise, if 'height' has a computed value of <css>auto</css> and the element has an intrinsic

   ratio then the used value of 'height' is:

   <code>(used width) / (intrinsic ratio)</code></p>

   Otherwise, if 'height' has a computed value of <css>auto</css> and the element has an intrinsic

   height, then that intrinsic height is the used value of 'height'.

   Otherwise, if 'height' has a computed value of <css>auto</css>, but none of the conditions above

   are met, then the used value of 'height' must be set to the height of the largest

   rectangle that has a 2:1 ratio, has a height not greater than ''150px'', and has a width not

   greater than the device width.

   After establishing the 'height', in order to position the replaced element, apply the

   following rules as appropriate.

   <ol>

     <li>

     If both 'top' and 'bottom' have the value <css>auto</css>, replace 'top' with the

     element’s static position.

     <li>

     If 'bottom' is <css>auto</css>, replace any <css>auto</css> on 'margin-top' or 'margin-bottom'

     with ''0''.

     <li>

     If at this point both 'margin-top' and 'margin-bottom' are still <css>auto</css>,

     solve the equation under the extra constraint that the two margins must get

     equal values.

     <li>

     If at this point there is only one <css>auto</css> remaining, solve the equation

     for that value.

     <li>

     If at this point the values are over-constrained, ignore the value for 'bottom'

     and solve for that value.

   </ol>

 <!-- End section: The height of absolute or fixed positioned, replaced element -->

 <h3 id="root-height">

 Auto heights for block formatting context roots</h3>

   In certain cases (see, e.g., <a href="#abs-non-replaced-height">The height of

   absolute or fixed positioned, non-replaced element</a> above), the height

   of an element that establishes a block formatting context is computed as follows:

   If it only has inline-level children, the height is the distance between the

   top of the topmost line box and the bottom of the bottommost line box.

   If it has block-level children, the height is the distance between the top

   margin-edge of the topmost block-level child box and the bottom margin-edge of

   the bottommost block-level child box.

   Absolutely positioned children are ignored, and relatively positioned boxes are

   considered without their offset. Note that the child box may be an <a href="http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">anonymous block box</a>.

   In addition, if the element has any floating descendants whose bottom margin edge

   is below the element’s bottom content edge, then the height is increased to

   include those edges. Only non-positioned <a>floats</a> that

   participate in this block formatting context are taken into account, e.g.,

   <a>floats</a> inside absolutely positioned descendants or

   other <a>floats</a> are not.

 <!-- End section: Auto heights for block formatting context roots -->

 <!-- End section: Sizing and positioning details -->

 <h2 id="dis-pos-flo">

 Relationships between 'display', 'position', and 'float'</h2>

   The three properties that affect box generation and layout — 'display',

   'position', and 'float' — interact as follows:

   <ol>

     <li>

     If 'display' has the value ''display/none'', then 'position' and 'float' do not apply.

     In this case, the element generates no box.

     <li>

     Otherwise, if 'position' has the value ''absolute'' or ''fixed'',

     and the value of 'float' is ''float/left'' or ''float/right'', the box is absolutely

     positioned and the computed value of 'float' is ''float/none''. The 'display' is

     set according to the table below. Positioning of the box will determined by

     the 'top', 'right', 'bottom' and 'left' properties and the box’s

     <a>containing block</a>.

     <li>

     Otherwise, if 'float' is other than ''float/none'', the box is <a>floated</a> and 'display' is set according to the table below.

     <li>

     Otherwise, if the element is the root element, 'display' is set according to the

     table below.

     <li>

     Otherwise, the remaining 'display' property values apply as specified.

   </ol>

   <table class="relationship-table">

     <tr>

       <th>Specified value</th>

       <th>Computed value</th>

     </tr>

     <tr>

       <td>inline-table</td>

       <td>table</td>

     </tr>

     <tr>

       <td>

         inline, <span>table-row-group</span>, <span>table-column</span>,

         <span>table-column-group</span>,

         <span>table-header-group</span>, <span>table-footer-group</span>,

         <span>table-row</span>,

         <span>table-cell</span>, <span>table-caption</span>, <span>inline-block</span>

       </td>

       <td>block</td>

     </tr>

     <tr>

       <td>others </td>

       <td><span>same as specified</span></td>

     </tr>

   </table>

   <p class="note">

     For new values defined for the 'display' property, the respective modules that define a

     new value also define the handling of the relationship with positioning and floats.

   </p>

 <!-- End section: Relationships between 'display', 'position', and 'float' -->

 <h2 id="comparison">

 Comparison of normal flow, floats, and positioning</h2>

   <em>This section is not normative.</em>

   To illustrate the differences between <a>normal flow</a>,

   <a>relative positioning</a>, <a>floats</a>,

   and absolute positioning, we provide a series of examples based on the following HTML:

   <div class="example">

     <pre class="lang-html">

     <!DOCTYPE html>

     <html>

         <head>

             <title>Comparison of positioning schemes</title>

             <style>

               body { display: block; font-size:12px; line-height: 200%;

                       width: 400px; height: 400px }

               p    { display: block }

               span { display: inline }

             </style>

         </head>

         <body>

         <p>

             Beginning of p contents.

             <span id="outer"> Start of outer contents.

             <span id="inner"> Inner contents.</span>

             End of outer contents.</span>

             End of p contents.

         </p>

         </body>

     </html>

     </pre>

   </div>

   The final positions of boxes generated by the <em>outer</em> and <em>inner</em>

   elements vary in each example. In each illustration, the numbers to the left of

   the illustration indicate the <a>normal flow</a> position of the

   double-spaced (for clarity) lines.

   Note: The diagrams in this section are illustrative and not to scale. They are

   meant to highlight the differences between the various <a>positioning

   schemes</a>, and are not intended to be reference renderings of the

   examples given.

 <h3 id="comp-normal-flow">

 Normal flow</h3>

   Consider the following CSS declarations for <em>outer</em> and <em>inner</em>

   that do not alter the <a>normal flow</a> of boxes:

   <div class="example">

     <pre class="lang-css">

       #outer { color: red }

       #inner { color: blue }

     </pre>

   </div>

   The P element contains all inline content: <a href="http://www.w3.org/TR/CSS2/visuren.html#anonymous">anonymous inline text</a> and

   two SPAN elements. Therefore, all of the content will be laid out in an inline

   formatting context, within a <a>containing block</a> established by the P element, producing

   something like:

 <figure>

   <img src="images/flow-generic.png" alt="Image illustrating the normal flow of text between parent and sibling boxes.">

   <figcaption>

     All of the text within the P's containing block flows together as continuous text,

     even though it's located in separated nested elements.

   </figcaption>

 </figure>

 <!-- End section: Normal flow -->

 <h3 id="comp-relpos">

 Relative positioning</h3>

   To see the effect of <a>relative positioning</a>,

   we specify:

   <div class="example">

     <pre class="lang-css">

     #outer { position: relative; top: -12px; color: red }

     #inner { position: relative; top: 12px; color: blue }

     </pre>

   </div>

   Text flows normally up to the <em>outer</em> element. The <em>outer</em> text is

   then flowed into its <a>normal flow</a> position and dimensions at the end of line 1. Then,

   the inline boxes containing the text (distributed over three lines) are shifted as a

   unit by ''-12px'' (upwards).

   The contents of <em>inner</em>, as a child of <em>outer</em>, would normally flow

   immediately after the words "of outer contents" (on line 1.5). However, the <em>inner</em>

   contents are themselves offset relative to the <em>outer</em> contents by ''12px''

   (downwards), back to their original position on line 2.

   <p class="note">

     Note that the content following <em>outer</em> is not affected by the relative

     positioning of <em>outer</em>.

   </p>

   <figure>

     <img src="images/flow-relative.png">

     <figcaption>

       The result is identical to normal flow,

       except that the "outer" text is shifted 12px upward,

       without affecting the flow of the "body" or "inner" text.

     </figcaption>

   </figure>

   <p class="note">

     Note also that had the offset of <em>outer</em> been ''-24px'', the text  of <em>outer</em>

     and the body text would have overlapped.

   </p>

 <h3 id="comp-floating">

 Floating a box</h3>

   Now consider the effect of <a href="http://www.w3.org/TR/CSS2/visuren.html#floats">

   floating</a> the <em>inner</em> element’s text to the right by means of the

   following rules:

   <div class="example">

     <pre class="lang-css">

     #outer { color: red }

     #inner { float: right; width: 130px; color: blue }

     </pre>

   </div>

   Text flows normally up to the <em>inner</em> box, which is pulled out of the flow

   and <a>floated</a> to the right margin (its 'width' has been

   assigned explicitly). Line boxes to the left of the float are shortened, and the

   document’s remaining text flows into them.

 <figure>

   <img src="images/flow-float.png" alt="Image illustrating the effects of floating a box.">

   <figcaption>

     The "inner" text lays out in an independent box on the right,

     causing the remaining "body" and "outer" text to flow around it.

   </figcaption>

 </figure>

   To show the effect of the 'clear' property, we add a <em>sibling</em> element to the

   example:

   <div class="example">

     <pre class="lang-html">

     <!DOCTYPE html>

     <html>

         <head>

             <title>Comparison of positioning schemes II</title>

             <style>

               #inner { float: right; width: 130px; color: blue }

               #sibling { color: red }

             </style>

         </head>

         <body>

         <p>

             Beginning of p contents.

             <span id="outer"> Start of outer contents.

             <span id="inner"> Inner contents.</span>

             <span id="sibling"> Sibling contents.</span>

             End of outer contents.</span>

             End of p contents.

         </p>

         </body>

     </html>

     </pre>

   </div>

   These styles cause the <em>inner</em> box to float to the right, as before,

   and the document’s remaining text to flow into the vacated space:

   <figure>

     <img src="images/flow-clear.png" alt="Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box.">

     <figcaption>

       Identical to the previous example,

       save that there is now "sibling" text

       flowing with the "body" and "outer" text.

     </figcaption>

   </figure>

   However, if the 'clear' property on the <em>sibling</em> element is set to 'right'

   (i.e., the generated <em>sibling</em> box will not accept a position next to

   <a>floating</a> boxes to its right), the <em>sibling</em> content begins to flow below the

   float:

   <div class="example">

     <pre class="lang-css">

     #inner { float: right; width: 130px; color: blue }

     #sibling { clear: right; color: red }

     </pre>

   </div>

   <figure>

     <img src="images/flow-clear2.png" alt="Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element.">

     <figcaption>

       Now the "sibling" text moves down to below the "inner" text’s box,

       leaving blank space behind.

       The text following the "sibling" text flows after it as normal.

     </figcaption>

   </figure>

 <h3 id="comp-abspos">

 Absolute positioning</h3>

   Next, we consider the effect of absolute positioning. Consider the following CSS

   declarations for <em>outer</em> and <em>inner</em>:

   <div class="example">

     <pre class="lang-css">

     #outer {

         position: absolute;

         top: 200px; left: 200px;

         width: 200px;

         color: red;

     }

     #inner { color: blue }

     </pre>

   </div>

   which cause the top of the <em>outer</em> box to be positioned with respect to its

   <a>containing block</a>. The <a>containing block</a> for a positioned box is established by the

   nearest positioned ancestor (or, if none exists, the <span>initial containing block</span>, as in

   our example). The top side of the <em>outer</em> box is ''200px'' below the top of the

   <a>containing block</a> and the left side is ''200px'' from the left side. The child box of

   <em>outer</em> is flowed normally with respect to its parent.

   <figure>

     <img src="images/flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box.">

     <figcaption>

       All of the text within #outer (the "outer" and "inner" text)

       moves down to an independent box in the lower right corner.

       The two halves of "body" text flow together.

     </figcaption>

   </figure>

   The following example shows an absolutely positioned box that is a child of a relatively

   positioned box. Although the parent <em>outer</em> box is not actually offset, setting

   its 'position' property to ''position/relative'' means that its box may serve as the containing

   block for positioned descendants. Since the <em>outer</em> box is an inline box that is

   split across several lines, the first inline box’s top and left edges (depicted by thick

   dashed lines in the illustration below) serve as references for 'top' and 'left' offsets.

   <div class="example">

     <pre class="lang-css">

     #outer {

         position: relative;

         color: red

     }

     #inner {

         position: absolute;

         top: 200px; left: -100px;

         height: 130px; width: 130px;

         color: blue;

     }

     </pre>

   </div>

   This results in something like the following:

   <figure>

     <img src="images/flow-abs-rel.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block.">

     <figcaption>

       The "inner" text is positioned in an independent box,

       relative to the top-left corner of the start of the "outer" text.

     </figcaption>

   </figure>

   If we do not position the <em>outer</em> box:

   <div class="example">

     <pre class="lang-css">

     #outer { color: red }

     #inner {

         position: absolute;

         top: 200px; left: -100px;

         height: 130px; width: 130px;

         color: blue;

     }

     </pre>

   </div>

   the <a>containing block</a> for <em>inner</em> becomes the <span>initial

   containing block</span> (in our example). The following illustration shows where

   the <em>inner</em> box would end up in this case.

   <figure>

     <img src="images/flow-static.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent.">

     <figcaption>

       Same as before,

       except now the "inner text" is positioned relative to the top-left corner of the page itself.

     </figcaption>

   </figure>

   Relative and absolute positioning may be used to implement change bars, as shown

   in the following example. The following fragment:

   <div class="example">

     <pre class="lang-html">

     <p style="position: relative; margin-right: 10px; left: 10px;">

       I used two red hyphens to serve as a change bar. They

       will "float" to the left of the line containing THIS

       <span style="position: absolute; top: auto; left: -1em; color: red;">--</span>

       word.

     </p>

     </pre>

   </div>

   might result in something like:

   <figure>

     <img src="images/changebar.png" alt="Image illustrating the use of floats to create a changebar effect.">

     <figcaption>

       The two red hyphens, indicating a change,

       sit in the left margin of the page

       on the line containing the word "THIS",

       regardless of what line that ends up being.

     </figcaption>

   </figure>

   First, the paragraph (whose <a>containing block</a> sides are shown in the

   illustration) is flowed normally. Then it is offset ''10px'' from the left edge

   of the <a>containing block</a> (thus, a right margin of ''10px'' has been

   reserved in anticipation of the offset). The two hyphens acting as change bars

   are taken out of the flow and positioned at the current line (due to 'top: auto'),

   ''-1em'' from the left edge of its containing block (established by the P in

   its final position).  The result is that the change bars seem to "float" to the

   left of the current line.

 <h2 id="layered-presentation">

 Layered presentation</h2>

   <em>In the following sections, the expression "in front of" means closer to the

   user as the user faces the screen.</em>

   In CSS, each box has a position in three dimensions. In addition to their horizontal

   and vertical positions, boxes lie along a "z-axis" and are formatted one on top

   of the other. Z-axis positions are particularly relevant when boxes overlap

   visually. This section discusses how boxes may be positioned along the z-axis.

   Each box belongs to one <dfn export>stacking context</dfn>. Each box in a given stacking

   context has an integer <dfn export>stack level</dfn>, which is its position on the z-axis

   relative to other boxes in the same stacking context. Boxes with greater stack

   levels are always formatted in front of boxes with lower stack levels. Boxes may

   have negative stack levels. Boxes with the same stack level in a stacking context

   are stacked bottom-to-top according to document tree order.

   The root element creates a <dfn export>root stacking context</dfn>, but other elements

   may establish <dfn export>local stacking contexts</dfn>. Stacking contexts are inherited.

   A local stacking context is atomic; boxes in other stacking contexts may not come

   between any of its boxes.

   An element that establishes a local stacking context generates a box that has

   two stack levels: one for the stacking context it creates (always ''0'') and one

   for the stacking context to which it belongs (given by the 'z-index' property).

   An element’s box has the same stack level as its parent’s box unless

   given a different stack level with the 'z-index' property.

   <pre class="propdef">

   Name: z-index

   Value: auto | <integer>

   Initial: auto

   Applies to: positioned elements

   Inherited: no

   Animatable: <integer>

   Percentages: N/A

   Media: visual

   Computed value: as specified

   </pre>

   For a positioned box, the 'z-index' property specifies:

   <ol>

     <li>

     The stack level of the box in the current stacking context.

     <li>

     Whether the box establishes a stacking context.

   </ol>

   Values have the following meanings:

   <dl dfn-for="z-index" dfn-type="value">

     <dt><dfn>&lt;integer></dfn></dt>

     <dd>

       This integer is the stack level of the generated box in the current stacking

       context. The box also establishes a new stacking context.

     <dt><dfn>auto</dfn></dt>

     <dd>

       The stack level of the generated box in the current stacking context is 0. The box

       does not establish a new stacking context unless it is the root element.

   </dl>

   In the following example, the stack levels of the boxes (named with their "id"

   attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level

   is inherited from the root box. The others are specified with the 'z-index' property.

   <div class="example">

     <pre class="lang-html">

     <!DOCTYPE html>

     <html>

         <head>

             <title>Z-order positioning</title>

             <style type="text/css">

                 .pile {

                 position: absolute;

                 left: 2in;

                 top: 2in;

                 width: 3in;

                 height: 3in;

                 }

             </style>

         </head>

         <body>

             <p>

                 <img id="image" class="pile"

                     src="butterfly.png" alt="A butterfly image"

                     style="z-index: 1">

             <div id="text1" class="pile"

                     style="z-index: 3">

                 This text will overlay the butterfly image.

             </div>

             <div id="text2">

                 This text will be beneath everything.

             </div>

             <div id="text3" class="pile"

                     style="z-index: 2">

                 This text will underlay text1, but overlay the butterfly image

             </div>

         </body>

     </html>

     </pre>

     This example demonstrates the notion of <em>transparency</em>. The default behavior of

     the background is to allow boxes behind it to be visible. In the example, each box

     transparently overlays the boxes below it. This behavior can be overridden by using one

     of the existing <a href="http://www.w3.org/TR/CSS2/colors.html#background-properties">background properties</a>.

   </div>

 <h2 id="det-stacking-context">

 Detailed stacking context</h2>

 <h3 id="definitions-stack">

 Definitions</h3>

   <dl dfn-for="tree-order" dfn-type="algo">

     <dt>Tree Order</dt>

     <dd>

       The preorder depth-first traversal of the <em>rendering</em> tree, in logical (not

       visual) order for bidirectional content, after taking into account properties

       that move boxes around.

     <dt>Element</dt>

     <dd>

       In this description, "element" refers to actual elements, pseudo-elements, and

       anonymous boxes. Pseudo-elements and anonymous boxes are treated as descendants

       in the appropriate places. For example, an outside list marker comes before an

       adjoining '::before' box in the line box, which comes before the content of the

       box, and so forth.

   </dl>

 <!-- End section: Definitions -->

 <h3 id="painting-order">

 Painting order</h3>

   The bottom of the stack is the furthest from the user, the top of the stack is the

   nearest to the user:

   <figure>

     <img src="images/stack.png" alt="A stacking context with four layers">

     <figcaption>Schematic diagram of a stacking context with four layers.</figcaption>

   </figure>

   The stacking context background and most negative positioned stacking contexts

   are at the bottom of the stack, while the most positive positioned stacking

   contexts are at the top of the stack.

   The canvas is transparent if contained within another, and given a UA-defined

   color if it is not. It is infinite in extent and contains the root element.

   Initially, the <a>viewport</a> is anchored with its top left corner at the

   canvas origin.

   The painting order for the descendants of an element generating a stacking

   context (see the 'z-index' property) is:

   <ol>

     <li>If the element is a root element:

       <ol>

         <li>background color of element over the entire canvas.</li>

         <li>

           background image of element, over the entire canvas, anchored at the origin

           that would be used if it was painted for the root element.

         </li>

       </ol>

     </li>

     <li>

       If the element is a block, list-item, or other block equivalent:

       <ol>

         <li>background color of element unless it is the root element.</li>

         <li>background image of element unless it is the root element.</li>

         <li>column rule of the element.</li>

         <li>border of element.</li>

       </ol>

       Otherwise, if the element is a block-level table:

       <ol>

         <li>table backgrounds (color then image) unless it is the root element.</li>

         <li>column group backgrounds (color then image).</li>

         <li>column backgrounds (color then image).</li>

         <li>row group backgrounds (color then image).</li>

         <li>row backgrounds (color then image).</li>

         <li>cell backgrounds (color then image).</li>

         <li>cell column rule for multi-column.</li>

         <li>all table borders (in tree order for separated borders).</li>

       </ol>

     </li>

     <li>

       Stacking contexts formed by positioned descendants with negative z-indices

       (excluding 0) in z-index order (most negative first) then tree order.

     </li>

     <li>

       For all its in-flow, non-positioned, block-level descendants in tree order: If the

       element is a block, list-item, or other block equivalent:

       <ol>

         <li>background color of element.</li>

         <li>background image of element.</li>

         <li>column rule of the element.</li>

         <li>border of element.</li>

       </ol>

       Otherwise, the element is a table:

       <ol>

         <li>table backgrounds (color then image).</li>

         <li>column group backgrounds (color then image).</li>

         <li>column backgrounds (color then image).</li>

         <li>row group backgrounds (color then image).</li>

         <li>row backgrounds (color then image).</li>

         <li>cell backgrounds (color then image).</li>

         <li>cell column rule (multi-column).</li>

         <li>all table borders (in tree order for separated borders).</li>

       </ol>

     </li>

     <li>

       All non-positioned <a>floating</a> descendants, in tree

       order. For each one of these, treat the element as if it created a new stacking

       context, but any positioned descendants and descendants which actually create

       a new stacking context are considered part of the parent stacking context,

       not this new one.

     </li>

     <li>If the element is an inline element that generates a stacking context, then:

       <ol>

         <li>For each line box that the element is in:

           <ol>

             <li>

               Jump to <a href="#each-box">7.2.1</a> for the box(es) of the element

               in that line box (in tree order).

             </li>

           </ol>

         </li>

       </ol>

     </li>

     <li>

         Otherwise: first for the element, then for all its in-flow, non-positioned,

         block-level descendants in tree order:

         <ol>

           <li>

             If the element is a block-level replaced element, then: the replaced

             content, atomically.

           </li>

           <li>Otherwise, for each line box of that element:

             <ol>

               <li id="each-box">

                 For each box that is a child of that element, in that line box, in

                 tree order:

                 <ol>

                   <li>background color of element.</li>

                   <li>background image of element.</li>

                   <li>column rule of the element.</li>

                   <li>border of element.</li>

                   <li>For inline elements:

                     <ol>

                       <li>

                         For all the elements in-flow, non-positioned,

                         inline-level children that are in this line box, and

                         all runs of text inside the element that is on this

                         line box, in tree order:

                         <ol>

                           <li>If this is a run of text, then:

                             <ol>

                               <li>

                                 any underlining affecting the text

                                 of the element, in tree order of the

                                 elements applying the underlining

                                 (such that the deepest element’s

                                 underlining, if any, is painted

                                 topmost and the root element’s

                                 underlining, if any, is drawn

                                 bottommost).

                               </li>

                               <li>

                                 any overlining affecting the text of

                                 the element, in tree order of the

                                 elements applying the overlining

                                 (such that the deepest element’s

                                 overlining, if any, is painted

                                 topmost and the root element’s

                                 overlining, if any, is drawn

                                 bottommost).

                               </li>

                               <li>the text</li>

                               <li>

                                 any line-through affecting the text

                                 of the element, in tree order of the

                                 elements applying the line-through

                                 (such that the deepest element’s

                                 line-through, if any, is painted

                                 topmost and the root element’s

                                 line-through, if any, is drawn

                                 bottommost).

                               </li>

                             </ol>

                           </li>

                           <li>

                             Otherwise, jump to <a href="#each-box">7.2.1</a>

                             for that element

                           </li>

                         </ol>

                       </li>

                     </ol>

                   </li>

                   <li>For inline-block and inline-table elements:

                     <ol>

                       <li>

                         For each one of these, treat the element as if it

                         created a new stacking context, but any positioned

                         descendants and descendants which actually create a

                         new stacking context are considered part of the

                         parent stacking context, not this new one.

                       </li>

                     </ol>

                   </li>

                   <li>For inline-level replaced elements:

                     <ol>

                       <li>the replaced content, atomically.</li>

                     </ol>

                   </li>

                   <li>

                     Optionally, the outline of the element (see <a href="#stack-order-step-ten">10 below</a>).

                   </li>

                 </ol>

                 <p class="note">

                   Note, some of the boxes may have been generated by line

                   splitting or the Unicode bidirectional algorithm.

                 </p>

               </li>

             </ol>

           </li>

           <li>

             Optionally, if the element is block-level, the outline of the element

             (see <a href="#stack-order-step-ten">10 below</a>).

           </li>

       </ol>

     </li>

     <li>

       All positioned, opacity or transform descendants, in tree order that fall

       into the following categories:

       <ol>

         <li>

           All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

           For those with 'z-index: auto', treat the element as if it created a new

           stacking context, but any positioned descendants and descendants which actually

           create a new stacking context should be considered part of the parent stacking

           context, not this new one.

           For those with 'z-index: 0' treat the stacking context generated atomically.

         </li>

         <li>

           All opacity descendants with 'opacity' less than ''1'', in tree order, create a

           stacking context generated atomically.

         </li>

         <li>

           All transform descendants with 'transform' other than ''transform/none'', in tree order, create

           a stacking context generated atomically.

         </li>

       </ol>

     </li>

   <li>

     Stacking contexts formed by positioned descendants with z-indices greater than or

     equal to 1 in z-index order (smallest first) then tree order.

   </li>

   <li id="stack-order-step-ten">

     Finally, implementations that do not draw outlines in steps above must draw outlines

     from this stacking context at this stage. (It is recommended to draw outlines in

     this step and not in the steps above.)

   </li>

 </ol>

 <!-- End section: Painting order -->

 <h3 id="stacking-notes">

 Notes</h3>

   The background of the root element is only painted once, over the whole canvas.

   While the backgrounds of bidirectional inlines are painted in tree order, they

   are positioned in visual order. Since the positioning of inline backgrounds is

   unspecified in CSS, the exact result of these two requirements is UA-defined.

   A future version of CSS may define this in more detail.

 <!-- End section: Notes -->

 <!-- End section: Detailed stacking context -->

 <h2 id="ack">

 Acknowledgments</h2>

   This module would not have been possible without input and support from many

   helpful people. Thanks to Bert Bos, Tantek Çelik, Anton Prowse,

   Rossen Atanassov, Chris Jones, John Jansen, Sylvain Galineau.

 <!-- End section: Acknowledgments -->

 <!--

  ██████  ██     ██    ███    ██    ██  ██████   ████████  ██████

 ██    ██ ██     ██   ██ ██   ███   ██ ██    ██  ██       ██    ██

 ██       ██     ██  ██   ██  ████  ██ ██        ██       ██

 ██       █████████ ██     ██ ██ ██ ██ ██   ████ ██████    ██████

 ██       ██     ██ █████████ ██  ████ ██    ██  ██             ██

 ██    ██ ██     ██ ██     ██ ██   ███ ██    ██  ██       ██    ██

  ██████  ██     ██ ██     ██ ██    ██  ██████   ████████  ██████

 -->

 <h2 class="no-num" id="changes">Changes</h2>

 <h3 id="changes-201207">

 Changes since the 7 February 2012 WD</h3>

   The following significant changes were made since the

   <a href="http://www.w3.org/TR/2012/WD-css3-positioning-20120207/">7 February 2012 Working Draft</a>

   <ul>

     <li>Added Rossen Atanassov as a new editor

     <li>Added ''sticky'' keyword to the 'position' property to define the sticky

       positioning behavior.

     <li>Added logical offset keywords 'offset-before', 'offset-end', 'offset-after'

       and 'offset-start'

     <li>Added new attachment properties 'attachment-type', 'attachment-top', 'attachment-right',

       'attachment-bottom', 'attachment-left', 'attachment'

     <li>Removed 'clip' property section.

   </ul>