Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 370227 of Stacking without z-index

  • Revision slug: CSS/Understanding_z-index/Stacking_without_z-index
  • Revision title: Stacking without z-index
  • Revision id: 370227
  • Created:
  • Creator: endlesswind
  • Is current revision? No
  • Comment

Revision Content

« CSS « 理解 CSS z-index

不含z-index的堆叠

当没有元素包含z-index属性时,元素按照如下顺序堆叠(从底到顶顺序):

  1. 根元素的背景和边界
  2. 普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠
  3. 定位元素按HTML中的出现顺序堆叠

在接下来的例子中,相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。

Notes:

  • 在一组由不含有任何z-index属性的同类元素,如例子中的定位块元素(DIV #1 to #4),这些元素按照它们在HTML结构中出现的顺序堆叠,而不管它们的定位属性如何。
  • 普通流中不含有定位属性的标准块元素(DIV #5)始终先于定位元素渲染并出现在定位元素的下层,即便它们在HTML结构中出现的位置晚于定位元素也是如此。

understanding_zindex_01.png

 

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/css">

div {
   font: 12px Arial;
}

span.bold { font-weight: bold; }

#normdiv {
   height: 70px;
   border: 1px dashed #999966;
   background-color: #ffffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv1 {
   opacity: 0.7;
   height: 100px;
   position: relative;
   top: 30px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv2 {
   opacity: 0.7;
   height: 100px;
   position: relative;
   top: 15px;
   left: 20px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#absdiv1 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   left: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

#absdiv2 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   right: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

</style></head>

<body>

<br /><br />

<div id="absdiv1">
   <br /><span class="bold">DIV #1</span>
   <br />position: absolute;
</div>

<div id="reldiv1">
   <br /><span class="bold">DIV #2</span>
   <br />position: relative;
</div>

<div id="reldiv2">
   <br /><span class="bold">DIV #3</span>
   <br />position: relative;
</div>

<div id="absdiv2">
   <br /><span class="bold">DIV #4</span>
   <br />position: absolute;
</div>

<div id="normdiv">
   <br /><span class="bold">DIV #5</span>
   <br />no positioning
</div>

</body></html>

See also

 

Original Document Information

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}

Revision Source

<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">理解 CSS z-index</span></a></p>
<h3 id=".E4.B8.8D.E5.90.ABz-index.E7.9A.84.E5.A0.86.E5.8F.A0">不含z-index的堆叠</h3>
<p>当没有元素包含z-index属性时,元素按照如下顺序堆叠(从底到顶顺序):</p>
<ol>
  <li>根元素的背景和边界</li>
  <li>普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠</li>
  <li>定位元素按HTML中的出现顺序堆叠</li>
</ol>
<p>在接下来的例子中,相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。</p>
<div class="note">
  <p><strong>Notes:</strong></p>
  <ul>
    <li>在一组由不含有任何z-index属性的同类元素,如例子中的定位块元素(DIV #1 to #4),这些元素按照它们在HTML结构中出现的顺序堆叠,而不管它们的定位属性如何。</li>
    <li>
      <p>普通流中不含有定位属性的标准块元素(DIV #5)始终先于定位元素渲染并出现在定位元素的下层,即便它们在HTML结构中出现的位置晚于定位元素也是如此。</p>
    </li>
  </ul>
</div>
<p><img alt="understanding_zindex_01.png" class="internal default" src="/@api/deki/files/910/=understanding_zindex_01.png" /></p>
<p>&nbsp;</p>
<h3 id="Example" name="Example">Example</h3>
<pre class="brush: html">
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html&gt;
&lt;head&gt;&lt;style type="text/css"&gt;

div {
   font: 12px Arial;
}

span.bold { font-weight: bold; }

#normdiv {
   height: 70px;
   border: 1px dashed #999966;
   background-color: #ffffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv1 {
   opacity: 0.7;
   height: 100px;
   position: relative;
   top: 30px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv2 {
   opacity: 0.7;
   height: 100px;
   position: relative;
   top: 15px;
   left: 20px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#absdiv1 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   left: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

#absdiv2 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   right: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

&lt;/style&gt;&lt;/head&gt;

&lt;body&gt;

&lt;br /&gt;&lt;br /&gt;

&lt;div id="absdiv1"&gt;
   &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
   &lt;br /&gt;position: absolute;
&lt;/div&gt;

&lt;div id="reldiv1"&gt;
   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
   &lt;br /&gt;position: relative;
&lt;/div&gt;

&lt;div id="reldiv2"&gt;
   &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
   &lt;br /&gt;position: relative;
&lt;/div&gt;

&lt;div id="absdiv2"&gt;
   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
   &lt;br /&gt;position: absolute;
&lt;/div&gt;

&lt;div id="normdiv"&gt;
   &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
   &lt;br /&gt;no positioning
&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;

</pre>
<h3 id="See_also">See also</h3>
<ul>
  <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a>&nbsp;: How floating elements are handled</li>
  <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a>&nbsp;: Using z-index to change default stacking</li>
  <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>&nbsp;: Notes on the stacking context</li>
  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>&nbsp;: 2-level HTML hierarchy, z-index on the last level</li>
  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a>&nbsp;: 2-level HTML hierarchy, z-index on all levels</li>
  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>&nbsp;: 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;">&nbsp;</span></li>
</ul>
<p>&nbsp;</p>
<div class="originaldocinfo">
  <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
  <ul>
    <li>Author(s): Paolo Lombardi</li>
    <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
    <li>Last Updated Date: July 9th, 2005</li>
  </ul>
</div>
<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}</p>
Revert to this revision