绝对位置不会相对于父级答案

【问题标题】：Position absolute wont get relative to parent绝对位置不会相对于父级
【发布时间】：2017-10-25 23:21:52
【问题描述】：

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

                            <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)

所以，我的问题是具有绝对位置的“卡片”的背面不会相对于我的视口显示。它改为锁定到引导列。当点击“卡片”时，我希望红色框始终显示在屏幕中间，但这似乎是不可能的。

甚至没有固定位置将其从流中取出并相对于主 div 或视口进行调整。

z-index 为 99 时，它仍然不会遍历其余元素。

如果有人对此有解决方案，我将不胜感激。提前谢谢你。

【问题讨论】：

寻求调试帮助的问题必须包含重现它所需的最短代码在问题本身中。 注意 - 请不要滥用代码块来解决这个问题要求.
“出于某种原因需要能够发布 codepen 链接”- Stack Overflow 会告诉您确切的原因，但您选择忽略它。

标签： html css twitter-bootstrap position css-position

【解决方案1】：

这是因为position: absolute 相对于第一个非静态定位元素定位元素。为了使其相对于视口定位，您需要改用position: fixed。

【讨论】：

但是如果你尝试在我的代码中使用 position: fixed 你会发现它不起作用。此外，如果我尝试将引导列更改为位置：静态，同样的事情并且没有任何反应。
您使用的是transform-style: preserve-3d 卡，这使得静态定位不起作用。尝试在 .flipped 类中控制位置。