SCSS卡片叠加布局问题求助：如何解决卡片仅堆叠在父容器底部的问题

嘿，我一眼就瞅出问题在哪了——你的HTML结构没搭对！你现在把正面卡片和背面卡片分别放在了两个独立的.card容器里，这就导致它们各占各的地盘，根本没法叠加在一起。

问题根源 #

每个.card都是position: relative的容器，里面的.card__side（设为absolute）只会在自己的父容器里定位。你把前后卡片拆成两个.card，它们自然会在父容器里上下堆叠，而不是在同一个位置叠加。

快速修复方案 #

1. 修正HTML结构

把正面和背面卡片放到同一个.card容器里，这样它们才能共享同一个定位参考：

<div class="row">
	<div class="col-1-of-3">
		<div class="card">
			<div class="card__side card__side--front"> Front </div>
			<div class="card__side card__side--back card__side--back-1"> Back </div>
		</div>
	</div>
</div>

2. 你的SCSS代码完全没问题！

你的SCSS逻辑是对的：

• .card设为position: relative，作为两个卡片面的定位锚点
• 两个.card__side都用absolute铺满父容器，实现完全重叠
• backface-visibility: hidden确保旋转后背面不可见，避免反向内容暴露
• hover时的rotateY变换完美实现翻转效果

只要调整完HTML结构，刷新页面就能看到卡片正面和背面叠加在一起，hover翻转的效果也能正常工作了！

小提示（可选） #

如果想给卡片加一点初始立体感，可以给.card加个轻微的阴影，或者调整perspective的值，让翻转效果更自然。

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