http://stackoverflow.com/questions/16148007/which-css-properties-create-a-stacking-context
In the previous example, Adding z-index, the rendering order of certain DIVs is influenced by their z-index value. This occurs because these DIVs have special properties which cause them to form a stacking context.
A stacking context is formed, anywhere in the document, by any element which is either
opacity value less than 1. (See the specification for opacity),position: fixed always creates a new stacking context, even when z-index is "auto" (Seethis post)Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.
In summary:
In this example every positioned element creates its own stacking context, because of their positioning and z-index values. The hierarchy of stacking contexts is organized as follows:
It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is completely resolved within DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.
Notes:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Understanding CSS z-index: The Stacking Context: Example Source</title>
<style type="text/css">
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
opacity: 0.7;
position: relative;
}
h1 {
font: inherit;
font-weight: bold;
}
#div1, #div2 {
border: 1px dashed #696;
padding: 10px;
background-color: #cfc;
}
#div1 {
z-index: 5;
margin-bottom: 190px;
}
#div2 {
z-index: 2;
}
#div3 {
z-index: 4;
opacity: 1;
position: absolute;
top: 40px;
left: 180px;
width: 330px;
border: 1px dashed #900;
background-color: #fdd;
padding: 40px 20px 20px;
}
#div4, #div5 {
border: 1px dashed #996;
background-color: #ffc;
}
#div4 {
z-index: 6;
margin-bottom: 15px;
padding: 25px 10px 5px;
}
#div5 {
z-index: 1;
margin-top: 15px;
padding: 5px 10px;
}
#div6 {
z-index: 3;
position: absolute;
top: 20px;
left: 180px;
width: 150px;
height: 125px;
border: 1px dashed #009;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<h1>Division Element #1</h1>
<code>position: relative;<br/>
z-index: 5;</code>
</div>
<div id="div2">
<h1>Division Element #2</h1>
<code>position: relative;<br/>
z-index: 2;</code>
</div>
<div id="div3">
<div id="div4">
<h1>Division Element #4</h1>
<code>position: relative;<br/>
z-index: 6;</code>
</div>
<h1>Division Element #3</h1>
<code>position: absolute;<br/>
z-index: 4;</code>
<div id="div5">
<h1>Division Element #5</h1>
<code>position: relative;<br/>
z-index: 1;</code>
</div>
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</div>
</body>
</html>
position: relative;
z-index: 5;
position: relative;
z-index: 2;
position: absolute;
z-index: 4;
position: relative;
z-index: 6;
position: relative;
z-index: 1;
position: absolute;
z-index: 3;
|
15
9
|
I'm studying about stacking contexts and doing some tests with the properties that create a stacking context. I did several tests and found that in addition to
Does anyone know any other properties that apply a stacking context? | |||
|
14
+500
|
One or more of the following scenarios will cause an element to establish its own stacking context1 for its descendants:
Note that a block formatting context is not the same as a stacking context; in fact, they are two completely independent (although not mutually exclusive) concepts. 1 This does not include pseudo-stacking contexts, an informal term that simply refers to things that behave like independent stacking contexts with respect to positioning, but actually participate in their parent stacking contexts. | ||||||||||||||||||||
|
|
15
9
|
I'm studying about stacking contexts and doing some tests with the properties that create a stacking context. I did several tests and found that in addition to
Does anyone know any other properties that apply a stacking context? | ||||||||||||||||||||
|
|
14
+500
|
One or more of the following scenarios will cause an element to establish its own stacking context1 for its descendants:
Note that a block formatting context is not the same as a stacking context; in fact, they are two completely independent (although not mutually exclusive) concepts. 1 This does not include pseudo-stacking contexts, an informal term that simply refers to things that behave like independent stacking contexts with respect to positioning, but actually participate in their parent stacking contexts. | ||||||||||||||||||||
|
1386
549
扫一扫
到【灌水乐园】发言
position: fixedcan create a stacking context on Chrom(e|ium)! There's a flag for it specifically inchrome://flags. – minitech♦ Apr 22 at 13:17z-indexrequires a position other than static to create a stacking context. I believe OP is aware of that. Or do do mean thatposition:fixedcreates a stacking context on its own withoutz-index?– Fabrício Matté Apr 22 at 13:17=]Will check it out. – Fabrício Matté Apr 22 at 13:19