initial commit

3 files changed, 287 insertions, 0 deletions

diff --git a/files/zh-tw/web/css/css_positioning/index.html b/files/zh-tw/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..0fe6fd55d0
--- /dev/null
+++ b/files/zh-tw/web/css/css_positioning/index.html
@@ -0,0 +1,108 @@
+---
+title: CSS Positioning
+slug: Web/CSS/CSS_Positioning
+translation_of: Web/CSS/CSS_Positioning
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Positioning</strong> is a module of CSS that defines how to absolutely and relavitely position elements on the page.</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="CSS_屬性">CSS 屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt>
+ <dd>Presents the notion of stacking context and explain how z-ordering works, with several examples.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>5.0</td>
+   <td>6.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..8bfd77a677
--- /dev/null
+++ b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,40 @@
+---
+title: Understanding CSS z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+  - Understanding_CSS_z-index
+  - Web
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. There is a single rendering flow, and all elements are aware of the space taken by others. <span class="seoSummary">The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.</span></p>
+<blockquote>
+ <p style=""><em>In CSS 2.1, 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.</em></p>
+</blockquote>
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+<p>It means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS {{ cssxref("z-index") }} property.</p>
+<p>Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or even unpredictable. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> to explain these rules better.</p>
+<p>This article will try to explain those rules, with some simplification and several examples.</p>
+<ol>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : 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> : 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> : 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> : 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> : 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> : 3-level HTML hierarchy, z-index on the second level</li>
+</ol>
+<p><small><em>Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.</em> </small></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> </p>
diff --git a/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
new file mode 100644
index 0000000000..26771f0fbb
--- /dev/null
+++ b/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -0,0 +1,139 @@
+---
+title: Stacking context example 1
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<p><font><font>« </font></font><a href="/en/CSS" title="CSS"><font><font>CSS</font></font></a><font><font> « </font></font><a href="/en/CSS/Understanding_z-index" title="了解CSS的z-index"><font><font>理解CSS的z-index</font></font></a></p>
+
+<h3 id="堆疊環境範例1"><font><font>堆疊環境範例1</font></font></h3>
+
+<p><font><font>讓我們先從一個基本的例子。</font><font>根堆疊情況下，我們有兩個div（DIV＃1和＃DIV 3），兩種相對定位的，但是如果沒有的z-index屬性。</font><font>裡面DIV＃1有一個絕對定位的div＃2，而在DIV＃3有一個絕對定位的div＃4，雙方沒有的z-index屬性。</font></font></p>
+
+<p><font><font>唯一的堆疊上下文是根上下文。</font><font>如果沒有Z-指標，要素依次層疊的發生。</font></font></p>
+
+<p><img alt="堆疊環境範例1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p>
+
+<p><font><font>如果DIV＃2被分配一個正的（非零和非自動）z索引值，它是上述所有其他的DIV呈現。</font></font></p>
+
+<p><img alt="堆疊環境範例1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p>
+
+<p><font><font>然後，如果DIV＃4也被分配比DIV＃2的Z指數正z指數越大，它上面的所有其他的DIV DIV，包括2＃呈現。</font></font></p>
+
+<p><img alt="堆疊環境範例1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p>
+
+<p><font><font>在最後的例子，你可以看到，DIV＃2和＃DIV 4不兄弟姐妹，因為它們屬於不同的家長在HTML元素的層次結構。</font><font>即便如此，DIV＃4堆疊相的DIV＃2可以通過z索引來控制。</font><font>碰巧的是，由於DIV＃1和＃DIV 3不指定任何的z-index值，他們不創造一個堆疊環境。</font><font>這意味著，所有的內容，包括DIV＃2和DIV＃4屬於相同根堆疊環境。</font></font></p>
+
+<p><font><font>在堆疊上下文而言，DIV＃1和DIV＃3簡單地同化到根元素，將得到的層次結構如下：</font></font></p>
+
+<ul>
+ <li><font><font>根堆疊環境</font></font>
+
+  <ul>
+   <li><font><font>DIV＃2（Z-指數1）</font></font></li>
+   <li><font><font>DIV＃4（Z-指數2）</font></font></li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong><font><font>注：</font></font></strong><font><font> DIV＃1和＃DIV 3不適透亮。</font><font>重要的是要記住，分配的不透明度小於1到定位的元素隱式創建一個疊加的背景下，就像一個加入的z-index值是非常重要的。</font><font>這個例子顯示，當父元素不會創建一個堆疊環境會發生什麼。</font></font></div>
+
+<h3 id="示例源代碼"><strong><font><font>示例源代碼</font></font></strong></h3>
+
+<pre class="brush: html"><font><font>&lt;！DOCTYPE HTML PUBLIC“ -  // W3C // DTD XHTML 1.0過渡// EN”</font></font><font><font>
+“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;</font></font><font><font>
+&lt;HTML&gt;</font></font><font><font>
+&lt;HEAD&gt; &lt;風格類型=“文本/ CSS”&gt;</font></font>
+<font><font>
+DIV {字體：12px的宋體; </font><font>}</font></font>
+<font><font>
+span.bold {字體重量：大膽的; </font><font>}</font></font>
+<font><font>
+＃DIV1，＃{DIV3</font></font><font><font>
+   高度：80px;</font></font><font><font>
+   位置：親屬;</font></font><font><font>
+   邊界：1px的虛線＃669966;</font></font><font><font>
+   背景色：#ccffcc;</font></font><font><font>
+   填充左：5px的;</font></font><font><font>
+}</font></font>
+<font><font>
+＃{DIV2</font></font><font><font>
+   不透明度：0.8;</font></font><font><font>
+   的z-index：1;</font></font><font><font>
+   位置：絕對的;</font></font><font><font>
+   寬度：150像素;</font></font><font><font>
+   高度：200像素;</font></font><font><font>
+   頂：20像素;</font></font><font><font>
+   左：170px;</font></font><font><font>
+   邊界：1px的虛線＃990000;</font></font><font><font>
+   背景色：#ffdddd;</font></font><font><font>
+   文本對齊：中心;</font></font><font><font>
+}</font></font>
+<font><font>
+＃{DIV4</font></font><font><font>
+   不透明度：0.8;</font></font><font><font>
+   的z-index：2;</font></font><font><font>
+   位置：絕對的;</font></font><font><font>
+   寬度：200像素;</font></font><font><font>
+   高度：70px;</font></font><font><font>
+   頂部：65px;</font></font><font><font>
+   左：50像素;</font></font><font><font>
+   邊界：1px的虛線＃000099;</font></font><font><font>
+   背景色：#ddddff;</font></font><font><font>
+   文本對齊：左;</font></font><font><font>
+   填充左：10px的;</font></font><font><font>
+}</font></font>
+
+<font><font>
+&lt;/風格&gt; &lt;/ HEAD&gt;</font></font>
+<font><font>
+&lt;BODY&gt;</font></font>
+<font><font>
+&lt;br /&gt;</font></font>
+<font><font>
+&lt;DIV ID =“DIV1”&gt;</font></font><font><font>
+&lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃1 &lt;/ SPAN&gt;</font></font><font><font>
+&lt;br /&gt;位置：親屬;</font></font><font><font>
+   &lt;DIV ID =“DIV2”&gt;</font></font><font><font>
+   &lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃2 &lt;/ SPAN&gt;</font></font><font><font>
+   &lt;br /&gt;位置：絕對的;</font></font><font><font>
+   &lt;br /&gt;的z-index：1;</font></font><font><font>
+   &lt;/ DIV&gt;</font></font><font><font>
+&lt;/ DIV&gt;</font></font>
+<font><font>
+&lt;br /&gt;</font></font>
+<font><font>
+&lt;DIV ID =“DIV3”&gt;</font></font><font><font>
+&lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃3 &lt;/ SPAN&gt;</font></font><font><font>
+&lt;br /&gt;位置：親屬;</font></font><font><font>
+   &lt;DIV ID =“DIV4”&gt;</font></font><font><font>
+   &lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃4 &lt;/ SPAN&gt;</font></font><font><font>
+   &lt;br /&gt;位置：絕對的;</font></font><font><font>
+   &lt;br /&gt;的z-index：2;</font></font><font><font>
+   &lt;/ DIV&gt;</font></font><font><font>
+&lt;/ DIV&gt;</font></font>
+<font><font>
+&lt;/ BODY&gt; &lt;/ HTML&gt;</font></font>
+</pre>
+
+<h3 id="另請參見"><font><font>另請參見</font></font></h3>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="EN / CSS / Understanding_z指數/ Stacking_without_z指數"><font><font>無堆疊的z-index</font></font></a><font><font>  ：默認規則疊加</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="EN / CSS / Understanding_z指數/ Stacking_and_float"><font><font>堆疊和浮動</font></font></a><font><font>  ：如何浮動元素的處理方式</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="EN / CSS / Understanding_z指數/ Adding_z指數"><font><font>添加的z-index</font></font></a><font><font>  ：使用的z-index來改變默認的堆疊</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="EN / CSS / Understanding_z指數/ The_stacking_context"><font><font>堆疊背景</font></font></a><font><font>  ：在堆疊環境票據</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="EN / CSS / Understanding_z指數/ Stacking_context_example_2"><font><font>堆疊環境例子2</font></font></a><font><font>  ：在所有層面上2級HTML層次，Z指數</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="EN / CSS / Understanding_z指數/ Stacking_context_example_3"><font><font>堆疊上下文例3</font></font></a><font><font>  ：3級的HTML等級，在第二級上的z索引</font></font><span id="cke_bm_89E" style="display: none;"> </span></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information"><font><font>原始文檔信息</font></font></h3>
+
+<ul>
+ <li><font><font>作者（S）：保羅·隆巴迪</font></font></li>
+ <li><font><font>這篇文章是我寫的文章在意大利的英譯</font></font><a class="external" href="http://www.yappy.it"><font><font>YappY</font></font></a><font><font>。</font><font>我同意共享下的所有內容正確</font></font><a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/"><font><font>知識共享：署名-相同方式共享許可</font></font></a></li>
+ <li><font><font>最後更新日期：2005年7月9日</font></font></li>
+</ul>
+</div>
+
+<p> </p>