绝对定位div容器内放置两个上下排列canvas容器的CSS实现

别担心，CSS刚入门时遇到布局问题太正常啦！我来一步步帮你实现这个需求～

核心思路 #

要让两个Canvas在绝对定位的父容器里上下堆叠且三者尺寸完全一致，关键在于：

• 父容器作为定位基准，设置好固定宽高
• 两个Canvas都使用绝对定位，让它们完全覆盖父容器的区域，自然就会堆叠在一起
• 确保Canvas的尺寸和父容器完全匹配

完整代码示例 #

HTML结构

<div class="parent-container">
  <canvas class="stacked-canvas"></canvas>
  <canvas class="stacked-canvas"></canvas>
</div>

CSS样式

/* 绝对定位的父容器 */
.parent-container {
  position: absolute;
  /* 这里设置你需要的具体宽高，比如400px×300px */
  width: 400px;
  height: 300px;
  /* 可选：如果需要把容器定位到页面某个位置，比如居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 可选：加个边框方便查看容器范围 */
  border: 1px solid #333;
}

/* 两个Canvas的通用样式 */
.stacked-canvas {
  position: absolute;
  /* 让Canvas从父容器的左上角开始定位 */
  top: 0;
  left: 0;
  /* 尺寸完全继承父容器 */
  width: 100%;
  height: 100%;
}

/* 可选：给不同Canvas加背景色，方便区分堆叠效果 */
.stacked-canvas:nth-child(1) {
  background-color: rgba(173, 216, 230, 0.6);
}

.stacked-canvas:nth-child(2) {
  background-color: rgba(255, 165, 0, 0.4);
}

关键细节说明 #

1. 父容器的定位：父容器用position: absolute，同时设置明确的width和height，这样它会成为内部绝对定位元素的基准。
2. Canvas的堆叠逻辑：两个Canvas都设置position: absolute且top: 0; left: 0，会完全重叠在父容器内，后面的Canvas默认会覆盖在前面的Canvas之上。如果需要调整层级，给对应的Canvas加z-index属性（数值越大越靠上）。
3. 尺寸一致性：Canvas默认有300px×150px的固有尺寸，必须通过CSS设置width: 100%; height: 100%，才能让它和父容器尺寸完全匹配，避免拉伸变形。

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