CSS 层叠加的 5 条原则
CSS 层叠加是网页布局中一个非常重要的概念，它决定了 HTML 元素在浏览器中的排列顺序。了解 CSS 层叠加的 5 条原则是非常必要的，以便更好地控制网页的布局。
法则一：同辈元素定位方式相同，且无 z-index 设置时，html 靠后者居上
在 HTML 中，同辈元素是指拥有共同父元素的元素。例如， `<div id="a">` 和 `<div id="b">` 是同辈元素，因为它们拥有共同的父元素 `<div id="f">`。当同辈元素的定位方式相同（如都是 `position:relative`），且没有设置 `z-index` 时，HTML 中靠后的元素将居上。
法则二：同辈元素同为动态定位时，且有 z-index 设置时，z-index 值大者居上
当同辈元素同时具有动态定位（如 `position:relative` 或 `position:absolute`），且都设置了 `z-index` 时，拥有更高的 `z-index` 值的元素将居上。
法则三：同辈元素定位方式不同时，动态定位居上
当同辈元素的定位方式不同时，动态定位的元素将居上。例如，如果一个元素的定位方式是 `position:relative`，而另一个元素的定位方式是 `position:absolute`，那么 `position:absolute` 的元素将居上。
法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html 靠后者居上
当非同辈元素中，任意一个元素或其祖元素不具备动态布局（如 `position:static`）时，HTML 中靠后的元素将居上。
法则五：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较
这条法则是比较难于理解的。它指的是当非同辈元素中，任意一个元素或其祖元素拥有动态定位时，需要同时比较它们的祖元素中的最高级别的祖元素，以确定它们的层叠关系。
例如，在以下示例中，我们可以看到 `div#a_inner5` 和 `div#b_inner4` 的层叠关系：
```html
<div id="ab" style="position:absolute;">
<div id="a" style="position:relative; z-index:100;">
<div id="a_inner1">
<div id="a_inner2">
<div id="a_inner3" style="position:relative; z-index:98;">
<div id="a_inner4">
<div id="a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="b">
<div id="b_inner1">
<div id="b_inner2">
<div id="b_inner3" style="position:relative; z-index:99;">
<div id="b_inner4">
</div>
</div>
</div>
</div>
</div>
```
在这里，我们需要比较 `div#a_inner5` 和 `div#b_inner4` 的祖元素中的最高级别的祖元素，以确定它们的层叠关系。`div#a_inner5` 的祖元素包括 `div#a`、`div#a_inner1`、`div#a_inner2`、`div#a_inner3` 和 `div#a_inner4`，而 `div#b_inner4` 的祖元素包括 `div#b`、`div#b_inner1` 和 `div#b_inner2`。通过比较它们的祖元素，我们可以确定它们的层叠关系。
了解 CSS 层叠加的 5 条原则是非常重要的，以便更好地控制网页的布局和设计。
