css - 嵌套一个位置:absolute element inside a position:fixed one

Question

我有一个 position:fixed 的 div，因此它始终位于浏览器视口(viewport)的中心。

在该 div 内部，我有另一个 div 当前设置在 position:absolute 上。我的理解是这个内部 div 实际上是相对于 html 文档定位的，因为没有绝对或相对父元素。

我不确定这一切是否完全正确——但无论如何，我需要内部 div 也保持在视口(viewport)的中心，同时保持相对于其父容器的位置.他们需要连贯地一起移动，同时保持以视口(viewport)为中心。

我尝试在内部 div 上使用 position:fixed 和 position:relative，但似乎都没有效果。它们并没有连贯地一起移动。

#outer-div {
width: 100%;
position: fixed;
top: 50%;
z-index: 100;
}

#inner-div {
top: 35%;
left: 30%; 
position: ??? ;     
}

谢谢!

Answer 1

您不能在保持相对于父容器的同时使用绝对定位将内部 div 与视口(viewport)居中。为什么不在内部 div 上使用 margin: 0 auto？这样，它将位于外部 div 的中心，它绝对位于视口(viewport)的中间。所有东西都会那样居中，不是吗？