绝对位置不会相对于父母

Question

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

https://codepen.io/anon/pen/wrVMPy

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

所以，我的问题是＆＃34; card＆＃34;的背面，其位置绝对，不会相对于我的视口显示。它会锁定到引导列。我希望红色框始终显示在屏幕中间，当＆＃34;卡＆＃34;被点击但似乎不可能。

即使位置固定也不会从流中取出并相对于主div或视口进行调整。

并且z指数为99时，它仍然没有超过其余元素。

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

Answer 1

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