<commit_before>正常狀況
------

![正常情形](images/css/zindex-normal.jpg)

---

怪怪的
------

![不正常情形1](images/css/zindex-abnormal.jpg)

---


還是怪怪的
------

![不正常情形2](images/css/zindex-abnormal2.jpg)

---

Layered Presentation
----------------

![Layers in Microsoft Word](images/css/word-layers.png)

決定誰在「前面」誰在「後面」

[「Stacking Context」](http://www.w3.org/TR/CSS2/visuren.html#layers): 疊東西的地方＝樓層

<p class="fragment">
一開始所有元素都在同一樓層 <br>
（Root stacking context ＝ `<html>`）
</p>

---

萬丈高樓平地起
------------

<div class="row leader">
  <div class="span2">
    ![Elevator](images/css/elevator.jpg)
    <small>
      [圖片來源 - flickr](https://www.flickr.com/photos/ryochan/3708078394/)
    </small>
  </div>
  <div class="span4">
    <p class="leader trailer">`z-index` = 樓層號碼（整數）</p>
    <hr>
    <h4 class="leader">形成 stacking context（新樓層）</h4>
    <ul>
      <li>`position: 非 static`</li>
      <li>`z-index != auto` 或 `opacity < 1`</li>
    </ul>
  </div>
</div>

---

巢狀 Stacking Context
--------

* 樓層內加蓋
* 不同樓層的樓中樓，不會交錯

- - -

[[mrorz-css-zindex]]

---

另一種比喻
--------

[「Stacking Context」](http://www.w3.org/TR/CSS2/visuren.html#layers): 疊東西的地方。

<div class="row">
  <div class="span3">

    <p class="trailer">疊東西的地方。</p>

    ![Lunch](images/css/lunchbox.jpg)

    <a href="http://global.rakuten.com/zh-tw/store/wakei-seijyaku/item/10000780/" class="leader">
      <small>圖片來源：酪梨壽司 - 愛妻便當</small>
    </a>
  </div>
  <div class="span3">
<commit_msg>Fix broken links.<commit_after>正常狀況
------

![正常情形](images/css/zindex-normal.jpg)

---

怪怪的
------

![不正常情形1](images/css/zindex-abnormal.jpg)

---


還是怪怪的
------

![不正常情形2](images/css/zindex-abnormal2.jpg)

---

Layered Presentation
----------------

![Layers in Microsoft Word](images/css/word-layers.png)

決定誰在「前面」誰在「後面」

[「Stacking Context」](http://www.w3.org/TR/CSS2/visuren.html#layers): 疊東西的地方＝樓層

<p class="fragment">
一開始所有元素都在同一樓層 <br>
（Root stacking context ＝ `<html>`）
</p>

---

萬丈高樓平地起
------------

<div class="row leader">
  <div class="span2">
    ![Elevator](images/css/elevator.jpg)
    <small>
      [圖片來源 - flickr](https://www.flickr.com/photos/ryochan/3708078394/)
    </small>
  </div>
  <div class="span4">
    <p class="leader trailer">`z-index` = 樓層號碼（整數）</p>
    <hr>
    <h4 class="leader">形成 stacking context（新樓層）</h4>
    <ul>
      <li>`position: 非 static`</li>
      <li>`z-index != auto` 或 `opacity < 1`</li>
    </ul>
  </div>
</div>

---

巢狀 Stacking Context
--------

* 樓層內加蓋
* 不同樓層的樓中樓，不會交錯

- - -

[[mrorz-css-zindex]]

---

另一種比喻
--------

[「Stacking Context」](http://www.w3.org/TR/CSS2/visuren.html#layers): 疊東西的地方。

<div class="row">
  <div class="span3">

    <p class="trailer">疊東西的地方。</p>

    ![Lunch](images/css/lunchbox.jpg)

    <a href="http://www.cwyuni.tw/blog/post/4455195-%E6%84%9B%E5%A6%BB%E4%BE%BF%E7%95%B6" class="leader">
      <small>圖片來源：酪梨壽司 - 愛妻便當</small>
    </a>
  </div>
  <div class="span3">

{'fraction_non_alphanumeric': 0.2494824016563147, 'fraction_numerical': 0.025534851621808144, 'mean_word_length': 2.755181347150259, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 69, 'https://': 2, 'lorem ipsum': 0, 'www.': 7, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2321655', 'n_tokens_mistral': 1577, 'n_tokens_neox': 1538, 'n_words': 174}