#层叠上下文：让你的布局脱颖而出！#

前端

2022-12-19 09:58:57

层叠上下文：释放布局的强大潜力

在CSS的世界中，特异性和就近原则固然重要，但它们只是冰山一角。层叠上下文才是真正的幕后功臣，它让你在布局中大展拳脚，创造出令人惊艳的效果。

什么是层叠上下文？

简单来说，层叠上下文是一个三维概念，决定了页面上元素的显示顺序。它就像一个透明的层，元素可以在上面堆叠，形成一个层叠顺序。最顶层的元素会覆盖底层的元素。

层叠上下文是如何产生的？

以下因素可以创建层叠上下文：

根层叠上下文： HTML文档的根元素()，它包含了整个页面。
定位元素： 普通元素设置 position 属性为非 static 值（如 relative、absolute 或 fixed）时。
z-index属性： 普通元素设置 z-index 属性为具体数值时。

层叠上下文的作用

层叠上下文可以实现各种效果，包括：

定位元素： 将元素固定在页面的特定位置，不受页面滚动影响。
创建浮动元素： 让元素随着页面滚动而移动。
创建叠加层： 覆盖其他元素的透明或半透明层。
解决布局问题： 避免元素重叠、错位等问题。

如何使用层叠上下文？

使用层叠上下文很简单，只需在CSS代码中设置 position 或 z-index 属性即可。例如：

.my-element {
  position: relative;
}

这会让.my-element具有相对定位，相对于其原始位置进行定位。

层叠上下文注意事项

使用层叠上下文时，要注意以下几点：

层叠顺序： 由元素的 z-index 属性决定。值越高，层级越高。
隔离性： 每个层叠上下文都是独立的，元素在不同层叠上下文中的层叠顺序不相关。
剪切： 层叠上下文可以剪切其他元素，导致其被隐藏。

层叠上下文示例

考虑以下代码：

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

.parent {
  position: relative;
}

.child-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: red;
}

.child-2 {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 50%;
  background-color: blue;
  z-index: 1;
}