能否用CSS Grid替代绝对定位实现元素层叠显示效果？

问题描述 #

我目前用绝对定位来层叠显示div.one、div.two、div.three（并覆盖div.main），想咨询是否可以通过CSS Grid实现相同效果，需求如下：

• div.main始终显示
• div.one、div.two、div.three仅在需要时显示

更新：已添加切换按钮以便更好地可视化效果

实现方案 #

当然可以用CSS Grid实现，核心思路是让所有需要层叠的元素占据Grid容器的同一个单元格，自然就能实现重叠效果，无需依赖绝对定位。

完整代码 #

HTML（无需修改）

<button>Toggle</button>
<div class="content">
  <div class="main">This is main</div>
  <div class="one">This is one</div>
  <div class="two">This is two</div>
  <div class="three">This is three</div>
</div>

CSS（核心修改部分）

* {
  box-sizing: border-box;
}

button {
  padding: 0.5em;
  margin-bottom: 1em;
}
 
.content {
  width: 15em;
  height: 8em;
  /* 转为Grid容器 */
  display: grid;
  margin: 0;
  padding: 0;
  border: 1px solid #aaa;
}

.main,
.one,
.two,
.three {
  /* 让所有元素占据同一个Grid单元格 */
  grid-area: 1 / 1;
  height: 100%;
  padding: 0.5em;
}

.main {
  background: #eee;
}

.one,
.two,
.three {
  display: none;
  padding: 2em;
}

.one.on,
.two.on,
.three.on {
  display: block;
}

.one {
  background: #fef8;
}

.two {
  background: #fec8;
}

.three {
  background: #cdc8;
}

JavaScript（无需修改）

const div = document.querySelector('div.content');
document.querySelector('button').addEventListener('click', () => {
  const on = document.querySelector('.on');
  on?.classList.remove('on');
  (on?.nextElementSibling || div.firstElementChild).classList.add('on');
});

实现说明 #

1. 将.content设置为display: grid，使其成为Grid容器
2. 通过grid-area: 1 / 1让.main和另外三个div都占据Grid的第一行第一列单元格，实现自然重叠
3. 保留原有的.on类控制显示隐藏的逻辑，无需调整JavaScript代码
4. 移除了原代码中绝对定位相关的position: absolute、top: 0、left: 0等样式，完全用Grid实现层叠

内容的提问来源于stack exchange，提问作者erosman