Html 绝对位置不会相对于父对象获取

我已将我的代码放入代码笔，以便轻松显示我的问题：

03
试验

（出于某种原因，需要能够发布代码笔链接）

所以，我的问题是，有绝对位置的“卡”的背面不会相对于我的视口显示。它将锁定到引导列。我希望红色的盒子总是出现在屏幕中间，当“卡片”被点击但似乎不可能。 “非偶数位置固定”将其从流中取出，并相对于主div或视口进行调整

而且z指数为99，它仍然不会覆盖其余的元素

---

如果有人能解决这个问题，我将不胜感激。提前感谢。

这是因为

位置：绝对

相对于第一个非静态定位的元素定位元素。为了使其相对于视口定位，您需要使用

position:fixed

。

寻求调试帮助的问题必须包含在问题本身中重现该问题所需的最短代码。注意-请不要滥用代码块来规避此要求。“出于某种原因需要能够发布代码笔链接”-堆栈溢出告诉您确切原因，但您选择忽略它。但是如果您尝试在我的代码中使用position:fixed，您会发现它无法工作。另外，如果我尝试将引导列更改为position:static，同样的事情不会发生。您正在为卡使用

transform style:preserve-3d

，这使得静态定位无法工作。尝试控制

.flipped

类中的位置。

                            <div class="card">
                                <div class="front">
                                    <h1>03</h1>
                                </div>
                                <div class="back">
                                    <p>test</p>
                                </div>
                            </div>

(needed to be able to post codepen link for some reason)