将position:absolute元素嵌套在position:fixed元素中
我有一个 div 位置：固定，以便它始终位于浏览器视口的中心。
在该 div 内部，我有另一个 div，当前设置在位置：绝对。我的理解是，这个内部 div 实际上是相对于 html 文档定位的，因为没有绝对或相对的父元素。
我不确定这一切是否完全正确 - 但无论如何，我需要内部 div 也 保持在视口的中心，同时保持相对于其父容器的位置。它们需要连贯地一起移动，同时保持以视口为中心。
我尝试在内部 div 上使用position:fixed 和position:relative，但似乎都不起作用。它们不能连贯地一起移动。
#outer-div {
width: 100%;
position: fixed;
top: 50%;
z-index: 100;
}
#inner-div {
top: 35%;
left: 30%;
position: ??? ;
}
谢谢！
I have a div which is position:fixed so that it it always in the center of the browser viewport.
Inside of that div, I have another div that is currently set on position:absolute. My understanding is that this inner div is actually being positioned relative to the html document since there are no absolute or relative parent elements.
I'm not sure whether all that is exactly right -- but anyway, I need the inner div to also stay centered to the viewport while at the same time staying put relative to its parent container. They need to move together coherently while both staying viewport-centered.
I attempted using position:fixed and position:relative on the inner div but neither seem to be working out. They do not move coherently together.
#outer-div {
width: 100%;
position: fixed;
top: 50%;
z-index: 100;
}
#inner-div {
top: 35%;
left: 30%;
position: ??? ;
}
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您无法使用绝对定位将内部 div 与视口居中，同时保持相对于其父容器的相对位置。为什么不在内部 div 上使用
margin: 0 auto？这样，它将位于外部 div 的中心，该 div 绝对位于视口的中间。一切都会以这种方式居中，不是吗？You can't center the inner div with the viewport using absolute positionning while staying relative to his parent container. Why not using
margin: 0 autoon the inner div? That way, it will be centered in the outer div, which is absolute positioned in the middle of the viewport. Everything would be centered that way, no?