CSS中的"后"发制人

用户916357440952025-09-20 10:07

问题

在Web开发中，经常遇到元素重叠的情况。比如在grid布局中，当两个元素占据同一块空间，为什么总是一个显示在前面，另一个被遮挡？

答案很简单，因为它遵循一个核心原则：在默认情况下，后出现的元素会覆盖先出现的元素。

想象 HTML 文档是一条时间线。浏览器从上到下逐行解析代码。当浏览器遇到一个新元素时，它会把它放到页面上。

HTML 顺序 ：如果先写了 <main>，再写 <footer>，那么在浏览器眼里，<footer> 就是后来的。
默认堆叠 ：在没有其他规则干预的情况下，后来的 <footer> 自然会显示在先来的 <main> 上方。

这个"先来后到"的原则就是 文档流（Document Flow） 的一个基本体现，它决定了所有元素在三维空间中的默认堆叠顺序。

示例

html 复制代码

<body>
  <header>
    <h1>Hello</h1>
  </header>
  <main>
    <p>main</p>
  </main>
  <footer>
    <p>footer</p>
  </footer>
</body>
</html>
<style>
body{
  display:grid;
  grid-template:1fr auto 1fr/1fr auto;
}
header{
  grid-row:1;
  grid-column:1/3;
}
main{
  grid-row:2;
  grid-column:2;
}
footer{
  grid-row:2;
  grid-column:2;
}
</style>

显示效果如下

可见footer遮盖了main

如何控制元素的堆叠？

若想改变这种默认的"后发制人"规则时，需要使用 CSS 的 z-index 属性。

z-index ：元素的"堆叠层级"，数值越高，元素就越靠前。

给需要显示在前面的元素设置一个更高的 z-index 值。