Skip to content

Commit 6505975

Browse files
fantasaifantasai
committed
[css-position-3] Delete z-index/stacking order section. This goes into its own spec. (Currently active definition is in CSS2.) w3c#4965 
1 parent f8ef2f1 commit 6505975

1 file changed

Lines changed: 0 additions & 382 deletions

File tree

‎css-position-3/Overview.bs‎

Lines changed: 0 additions & 382 deletions
Original file line numberDiff line numberDiff line change
@@ -1758,388 +1758,6 @@ Absolute positioning</h3>
17581758
its final position). The result is that the change bars seem to "float" to the
17591759
left of the current line.
17601760

1761-
<h2 id="layered-presentation">
1762-
Layered presentation</h2>
1763-
1764-
<em>In the following sections, the expression "in front of" means closer to the
1765-
user as the user faces the screen.</em>
1766-
1767-
In CSS, each box has a position in three dimensions. In addition to their horizontal
1768-
and vertical positions, boxes lie along a "z-axis" and are formatted one on top
1769-
of the other. Z-axis positions are particularly relevant when boxes overlap
1770-
visually. This section discusses how boxes may be positioned along the z-axis.
1771-
1772-
Each box belongs to one <dfn export>stacking context</dfn>. Each box in a given stacking
1773-
context has an integer <dfn export>stack level</dfn>, which is its position on the z-axis
1774-
relative to other boxes in the same stacking context. Boxes with greater stack
1775-
levels are always formatted in front of boxes with lower stack levels. Boxes may
1776-
have negative stack levels. Boxes with the same stack level in a stacking context
1777-
are stacked bottom-to-top according to document tree order.
1778-
1779-
The root element creates a <dfn export>root stacking context</dfn>, but other elements
1780-
may establish <dfn export>local stacking contexts</dfn>. Stacking contexts are inherited.
1781-
A local stacking context is atomic; boxes in other stacking contexts may not come
1782-
between any of its boxes.
1783-
1784-
An element that establishes a local stacking context generates a box that has
1785-
two stack levels: one for the stacking context it creates (always ''0'') and one
1786-
for the stacking context to which it belongs (given by the 'z-index' property).
1787-
1788-
An element’s box has the same stack level as its parent’s box unless
1789-
given a different stack level with the 'z-index' property.
1790-
1791-
<pre class="propdef">
1792-
Name: z-index
1793-
Value: auto | &lt;integer>
1794-
Initial: auto
1795-
Applies to: positioned elements
1796-
Inherited: no
1797-
Animatable: &lt;integer>
1798-
Percentages: N/A
1799-
Computed value: the keyword ''z-index/auto'' or an integer
1800-
Animation type: by computed value
1801-
</pre>
1802-
1803-
For a positioned box, the 'z-index' property specifies:
1804-
1805-
<ol>
1806-
<li>
1807-
The stack level of the box in the current stacking context.
1808-
1809-
<li>
1810-
Whether the box establishes a stacking context.
1811-
</ol>
1812-
1813-
Values have the following meanings:
1814-
1815-
<dl dfn-for="z-index" dfn-type="value">
1816-
<dt><dfn>&lt;integer></dfn></dt>
1817-
<dd>
1818-
This integer is the stack level of the generated box in the current stacking
1819-
context. The box also establishes a new stacking context.
1820-
1821-
<dt><dfn>auto</dfn></dt>
1822-
<dd>
1823-
The stack level of the generated box in the current stacking context is 0.
1824-
If the box has 'position: fixed' or if it is the root, it also establishes a new stacking context.
1825-
</dl>
1826-
1827-
In the following example, the stack levels of the boxes (named with their "id"
1828-
attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level
1829-
is inherited from the root box. The others are specified with the 'z-index' property.
1830-
1831-
<div class="example">
1832-
<pre class="lang-html">
1833-
&lt;!DOCTYPE html>
1834-
&lt;html>
1835-
&lt;head>
1836-
&lt;title>Z-order positioning&lt;/title>
1837-
&lt;style type="text/css">
1838-
.pile {
1839-
position: absolute;
1840-
left: 2in;
1841-
top: 2in;
1842-
width: 3in;
1843-
height: 3in;
1844-
}
1845-
&lt;/style>
1846-
&lt;/head>
1847-
&lt;body>
1848-
&lt;p>
1849-
&lt;img id="image" class="pile"
1850-
src="butterfly.png" alt="A butterfly image"
1851-
style="z-index: 1">
1852-
&lt;div id="text1" class="pile"
1853-
style="z-index: 3">
1854-
This text will overlay the butterfly image.
1855-
&lt;/div>
1856-
&lt;div id="text2">
1857-
This text will be beneath everything.
1858-
&lt;/div>
1859-
&lt;div id="text3" class="pile"
1860-
style="z-index: 2">
1861-
This text will underlay text1, but overlay the butterfly image
1862-
&lt;/div>
1863-
&lt;/body>
1864-
&lt;/html>
1865-
</pre>
1866-
1867-
This example demonstrates the notion of <em>transparency</em>. The default behavior of
1868-
the background is to allow boxes behind it to be visible. In the example, each box
1869-
transparently overlays the boxes below it. This behavior can be overridden by using one
1870-
of the existing <a href="https://www.w3.org/TR/CSS2/colors.html#background-properties">background properties</a>.
1871-
</div>
1872-
1873-
<h2 id="det-stacking-context">
1874-
Detailed stacking context</h2>
1875-
1876-
<h3 id="definitions-stack">
1877-
Definitions</h3>
1878-
1879-
<dl dfn-for="tree-order" dfn-type="algo">
1880-
<dt>Tree Order</dt>
1881-
<dd>
1882-
The preorder depth-first traversal of the <em>rendering</em> tree, in logical (not
1883-
visual) order for bidirectional content, after taking into account properties
1884-
that move boxes around.
1885-
1886-
<dt>Element</dt>
1887-
<dd>
1888-
In this description, "element" refers to actual elements, pseudo-elements, and
1889-
anonymous boxes. Pseudo-elements and anonymous boxes are treated as descendants
1890-
in the appropriate places. For example, an outside list marker comes before an
1891-
adjoining '::before' box in the line box, which comes before the content of the
1892-
box, and so forth.
1893-
</dl>
1894-
<!-- End section: Definitions -->
1895-
1896-
<h3 id="painting-order">
1897-
Painting order</h3>
1898-
1899-
The bottom of the stack is the furthest from the user, the top of the stack is the
1900-
nearest to the user:
1901-
1902-
<figure>
1903-
<img src="images/stack.png" alt="A stacking context with four layers">
1904-
<figcaption>Schematic diagram of a stacking context with four layers.</figcaption>
1905-
</figure>
1906-
1907-
The stacking context background and most negative positioned stacking contexts
1908-
are at the bottom of the stack, while the most positive positioned stacking
1909-
contexts are at the top of the stack.
1910-
1911-
The canvas is transparent if contained within another, and given a UA-defined
1912-
color if it is not. It is infinite in extent and contains the root element.
1913-
Initially, the <a>viewport</a> is anchored with its top left corner at the
1914-
canvas origin.
1915-
1916-
The painting order for the descendants of an element generating a stacking
1917-
context (see the 'z-index' property) is:
1918-
1919-
<ol>
1920-
<li>If the element is a root element:
1921-
<ol>
1922-
<li>background color of element over the entire canvas.</li>
1923-
<li>
1924-
background image of element, over the entire canvas, anchored at the origin
1925-
that would be used if it was painted for the root element.
1926-
</li>
1927-
</ol>
1928-
</li>
1929-
<li>
1930-
If the element is a block, list-item, or other block equivalent:
1931-
<ol>
1932-
<li>background color of element unless it is the root element.</li>
1933-
<li>background image of element unless it is the root element.</li>
1934-
<li>column rule of the element.</li>
1935-
<li>border of element.</li>
1936-
</ol>
1937-
Otherwise, if the element is a block-level table:
1938-
<ol>
1939-
<li>table backgrounds (color then image) unless it is the root element.</li>
1940-
<li>column group backgrounds (color then image).</li>
1941-
<li>column backgrounds (color then image).</li>
1942-
<li>row group backgrounds (color then image).</li>
1943-
<li>row backgrounds (color then image).</li>
1944-
<li>cell backgrounds (color then image).</li>
1945-
<li>cell column rule for multi-column.</li>
1946-
<li>all table borders (in tree order for separated borders).</li>
1947-
</ol>
1948-
</li>
1949-
<li>
1950-
Stacking contexts formed by positioned descendants with negative z-indices
1951-
(excluding 0) in z-index order (most negative first) then tree order.
1952-
</li>
1953-
<li>
1954-
For all its in-flow, non-positioned, block-level descendants in tree order: If the
1955-
element is a block, list-item, or other block equivalent:
1956-
<ol>
1957-
<li>background color of element.</li>
1958-
<li>background image of element.</li>
1959-
<li>column rule of the element.</li>
1960-
<li>border of element.</li>
1961-
</ol>
1962-
Otherwise, the element is a table:
1963-
<ol>
1964-
<li>table backgrounds (color then image).</li>
1965-
<li>column group backgrounds (color then image).</li>
1966-
<li>column backgrounds (color then image).</li>
1967-
<li>row group backgrounds (color then image).</li>
1968-
<li>row backgrounds (color then image).</li>
1969-
<li>cell backgrounds (color then image).</li>
1970-
<li>cell column rule (multi-column).</li>
1971-
<li>all table borders (in tree order for separated borders).</li>
1972-
</ol>
1973-
</li>
1974-
<li>
1975-
All non-positioned <a>floating</a> descendants, in tree
1976-
order. For each one of these, treat the element as if it created a new stacking
1977-
context, but any positioned descendants and descendants which actually create
1978-
a new stacking context are considered part of the parent stacking context,
1979-
not this new one.
1980-
</li>
1981-
<li>If the element is an inline element that generates a stacking context, then:
1982-
<ol>
1983-
<li>For each line box that the element is in:
1984-
<ol>
1985-
<li>
1986-
Jump to <a href="#each-box">7.2.1</a> for the box(es) of the element
1987-
in that line box (in tree order).
1988-
</li>
1989-
</ol>
1990-
</li>
1991-
</ol>
1992-
</li>
1993-
<li>
1994-
Otherwise: first for the element, then for all its in-flow, non-positioned,
1995-
block-level descendants in tree order:
1996-
<ol>
1997-
<li>
1998-
If the element is a block-level replaced element, then: the replaced
1999-
content, atomically.
2000-
</li>
2001-
<li>Otherwise, for each line box of that element:
2002-
<ol>
2003-
<li id="each-box">
2004-
For each box that is a child of that element, in that line box, in
2005-
tree order:
2006-
<ol>
2007-
<li>background color of element.</li>
2008-
<li>background image of element.</li>
2009-
<li>column rule of the element.</li>
2010-
<li>border of element.</li>
2011-
<li>For inline elements:
2012-
<ol>
2013-
<li>
2014-
For all the elements in-flow, non-positioned,
2015-
inline-level children that are in this line box, and
2016-
all runs of text inside the element that is on this
2017-
line box, in tree order:
2018-
<ol>
2019-
<li>If this is a run of text, then:
2020-
<ol>
2021-
<li>
2022-
any underlining affecting the text
2023-
of the element, in tree order of the
2024-
elements applying the underlining
2025-
(such that the deepest element’s
2026-
underlining, if any, is painted
2027-
topmost and the root element’s
2028-
underlining, if any, is drawn
2029-
bottommost).
2030-
</li>
2031-
<li>
2032-
any overlining affecting the text of
2033-
the element, in tree order of the
2034-
elements applying the overlining
2035-
(such that the deepest element’s
2036-
overlining, if any, is painted
2037-
topmost and the root element’s
2038-
overlining, if any, is drawn
2039-
bottommost).
2040-
</li>
2041-
<li>the text</li>
2042-
<li>
2043-
any line-through affecting the text
2044-
of the element, in tree order of the
2045-
elements applying the line-through
2046-
(such that the deepest element’s
2047-
line-through, if any, is painted
2048-
topmost and the root element’s
2049-
line-through, if any, is drawn
2050-
bottommost).
2051-
</li>
2052-
</ol>
2053-
</li>
2054-
<li>
2055-
Otherwise, jump to <a href="#each-box">7.2.1</a>
2056-
for that element
2057-
</li>
2058-
</ol>
2059-
</li>
2060-
</ol>
2061-
</li>
2062-
<li>For inline-block and inline-table elements:
2063-
<ol>
2064-
<li>
2065-
For each one of these, treat the element as if it
2066-
created a new stacking context, but any positioned
2067-
descendants and descendants which actually create a
2068-
new stacking context are considered part of the
2069-
parent stacking context, not this new one.
2070-
</li>
2071-
</ol>
2072-
</li>
2073-
<li>For inline-level replaced elements:
2074-
<ol>
2075-
<li>the replaced content, atomically.</li>
2076-
</ol>
2077-
</li>
2078-
<li>
2079-
Optionally, the outline of the element (see <a href="#stack-order-step-ten">10 below</a>).
2080-
</li>
2081-
</ol>
2082-
<p class="note">
2083-
Note, some of the boxes may have been generated by line
2084-
splitting or the Unicode bidirectional algorithm.
2085-
</p>
2086-
</li>
2087-
</ol>
2088-
</li>
2089-
<li>
2090-
Optionally, if the element is block-level, the outline of the element
2091-
(see <a href="#stack-order-step-ten">10 below</a>).
2092-
</li>
2093-
</ol>
2094-
</li>
2095-
<li>
2096-
All positioned, opacity or transform descendants, in tree order that fall
2097-
into the following categories:
2098-
<ol>
2099-
<li>
2100-
All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
2101-
2102-
For those with 'z-index: auto', treat the element as if it created a new
2103-
stacking context, but any positioned descendants and descendants which actually
2104-
create a new stacking context should be considered part of the parent stacking
2105-
context, not this new one.
2106-
2107-
For those with 'z-index: 0' treat the stacking context generated atomically.
2108-
</li>
2109-
<li>
2110-
All opacity descendants with 'opacity' less than ''1'', in tree order, create a
2111-
stacking context generated atomically.
2112-
</li>
2113-
<li>
2114-
All transform descendants with 'transform' other than ''transform/none'', in tree order, create
2115-
a stacking context generated atomically.
2116-
</li>
2117-
</ol>
2118-
</li>
2119-
<li>
2120-
Stacking contexts formed by positioned descendants with z-indices greater than or
2121-
equal to 1 in z-index order (smallest first) then tree order.
2122-
</li>
2123-
<li id="stack-order-step-ten">
2124-
Finally, implementations that do not draw outlines in steps above must draw outlines
2125-
from this stacking context at this stage. (It is recommended to draw outlines in
2126-
this step and not in the steps above.)
2127-
</li>
2128-
</ol>
2129-
<!-- End section: Painting order -->
2130-
2131-
<h3 id="stacking-notes">
2132-
Notes</h3>
2133-
2134-
The background of the root element is only painted once, over the whole canvas.
2135-
2136-
While the backgrounds of bidirectional inlines are painted in tree order, they
2137-
are positioned in visual order. Since the positioning of inline backgrounds is
2138-
unspecified in CSS, the exact result of these two requirements is UA-defined.
2139-
A future version of CSS may define this in more detail.
2140-
<!-- End section: Notes -->
2141-
<!-- End section: Detailed stacking context -->
2142-
21431761
<h2 id="ack">
21441762
Acknowledgments</h2>
21451763

0 commit comments

Comments
 (0)