掌握 HTML 元素層級：深入 z-index 與 Stacking Context

在網頁排版與元素定位的過程中，position 和 z-index 是非常常見，但也容易令人混淆的 CSS 屬性。本文透過一段簡單的 HTML + CSS 範例，探討「子元素的位置」如何受到這些屬性的影響，並進一步解析 Stacking Context（堆疊上下文）的運作邏輯。

範例程式碼如下：

<div style = "position: relative; width: 300px; height: 300px; background: lightyellow; top: 150px; left: 250px; border: 2px solid; z-index: -2;">

    <div style = "position: absolute; z-index: 77; top: 5px; left: 90px; width: 60px; height: 70px; background: lightgreen;">lll

         <div style = "position: absolute; top: 8px; left: 20px; z-index: 89; width: 300px; height: 30px; background: violet;">AAAAAAAAAA</div>

   </div>

   <div style = "position: absolute; z-index: 88; left: 70px; top: 22px; width: 60px; height: 40px; background: lightblue;">BBBBB</div>

   <div style = "position: absolute; z-index: 99; left: 80px; top: 33px; width: 60px; height: 40px; background: lightgray;">CCCCC</div>

</div>

C語言：函式指標與回呼函式的實戰範例

在 C 語言中，函式指標是許多進階設計技巧的基礎，其中回呼函式 (Callback Function) 是最常見的應用之一。透過這種設計，可以讓程式變得更加靈活並且易於模組化。接下來，我們將通過一個範例來介紹如何使用回呼函式。程式碼如下：