From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/css/css_positioning/index.html | 108 ++++++++++++++++ .../understanding_z_index/index.html | 40 ++++++ .../stacking_context_example_1/index.html | 139 +++++++++++++++++++++ 3 files changed, 287 insertions(+) create mode 100644 files/zh-tw/web/css/css_positioning/index.html create mode 100644 files/zh-tw/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html (limited to 'files/zh-tw/web/css/css_positioning') 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 +--- +

{{CSSRef}}

+ +

CSS Positioning is a module of CSS that defines how to absolutely and relavitely position elements on the page.

+ +

參考

+ +

CSS 屬性

+ +
+ +
+ +

指南

+ +
+
Understanding CSS z-index
+
Presents the notion of stacking context and explain how z-ordering works, with several examples.
+
+ +

規範

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}5.06.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
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 +--- +

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. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+
+

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.

+
+

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+

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.

+

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 CSS-2.1 Appendix E to explain these rules better.

+

This article will try to explain those rules, with some simplification and several examples.

+
    +
  1. Stacking without z-index : Default stacking rules
    2. +
  2. Stacking and float : How floating elements are handled
    3. +
  3. Adding z-index : Using z-index to change default stacking
    4. +
  4. The stacking context : Notes on the stacking context
    5. +
  5. Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
    6. +
  6. Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
    7. +
  7. Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
    8. +
+

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

+
+

Original Document Information

+ +
+

 

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 +--- +

« CSS « 理解CSS的z-index

+ +

堆疊環境範例1

+ +

讓我們先從一個基本的例子。根堆疊情況下，我們有兩個div（DIV＃1和＃DIV 3），兩種相對定位的，但是如果沒有的z-index屬性。裡面DIV＃1有一個絕對定位的div＃2，而在DIV＃3有一個絕對定位的div＃4，雙方沒有的z-index屬性。

+ +

唯一的堆疊上下文是根上下文。如果沒有Z-指標，要素依次層疊的發生。

+ +

堆疊環境範例1

+ +

如果DIV＃2被分配一個正的（非零和非自動）z索引值，它是上述所有其他的DIV呈現。

+ +

堆疊環境範例1

+ +

然後，如果DIV＃4也被分配比DIV＃2的Z指數正z指數越大，它上面的所有其他的DIV DIV，包括2＃呈現。

+ +

堆疊環境範例1

+ +

在最後的例子，你可以看到，DIV＃2和＃DIV 4不兄弟姐妹，因為它們屬於不同的家長在HTML元素的層次結構。即便如此，DIV＃4堆疊相的DIV＃2可以通過z索引來控制。碰巧的是，由於DIV＃1和＃DIV 3不指定任何的z-index值，他們不創造一個堆疊環境。這意味著，所有的內容，包括DIV＃2和DIV＃4屬於相同根堆疊環境。

+ +

在堆疊上下文而言，DIV＃1和DIV＃3簡單地同化到根元素，將得到的層次結構如下：

+ + + +
注： DIV＃1和＃DIV 3不適透亮。重要的是要記住，分配的不透明度小於1到定位的元素隱式創建一個疊加的背景下，就像一個加入的z-index值是非常重要的。這個例子顯示，當父元素不會創建一個堆疊環境會發生什麼。
+ +

示例源代碼

+ +
<！DOCTYPE HTML PUBLIC“ -  // W3C // DTD XHTML 1.0過渡// EN”
+“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
+<HTML>
+<HEAD> <風格類型=“文本/ CSS”>
+
+DIV {字體：12px的宋體; }
+
+span.bold {字體重量：大膽的; }
+
+＃DIV1，＃{DIV3
+   高度：80px;
+   位置：親屬;
+   邊界：1px的虛線＃669966;
+   背景色：#ccffcc;
+   填充左：5px的;
+}
+
+＃{DIV2
+   不透明度：0.8;
+   的z-index：1;
+   位置：絕對的;
+   寬度：150像素;
+   高度：200像素;
+   頂：20像素;
+   左：170px;
+   邊界：1px的虛線＃990000;
+   背景色：#ffdddd;
+   文本對齊：中心;
+}
+
+＃{DIV4
+   不透明度：0.8;
+   的z-index：2;
+   位置：絕對的;
+   寬度：200像素;
+   高度：70px;
+   頂部：65px;
+   左：50像素;
+   邊界：1px的虛線＃000099;
+   背景色：#ddddff;
+   文本對齊：左;
+   填充左：10px的;
+}
+
+
+</風格> </ HEAD>
+
+<BODY>
+
+<br />
+
+<DIV ID =“DIV1”>
+<br />的<span class =“黑體”> DIV＃1 </ SPAN>
+<br />位置：親屬;
+   <DIV ID =“DIV2”>
+   <br />的<span class =“黑體”> DIV＃2 </ SPAN>
+   <br />位置：絕對的;
+   <br />的z-index：1;
+   </ DIV>
+</ DIV>
+
+<br />
+
+<DIV ID =“DIV3”>
+<br />的<span class =“黑體”> DIV＃3 </ SPAN>
+<br />位置：親屬;
+   <DIV ID =“DIV4”>
+   <br />的<span class =“黑體”> DIV＃4 </ SPAN>
+   <br />位置：絕對的;
+   <br />的z-index：2;
+   </ DIV>
+</ DIV>
+
+</ BODY> </ HTML>
+
+ +

另請參見

+ + + +
+

原始文檔信息

+ + +
+ +

 

-- cgit v1.2.3-54-g00ecf