Html 位置绝对'div'内部位置相对父'div'在镀铬和边缘上消失

我正在尝试创建一个react组件并将其放置在页面上

该组件由多个

div

s和

position:absolute

组成，因此我可以将它们堆叠在一起。包含所有这些

div

s的父级具有

位置：相对
和大小
400px 400px

在firefox上，一切都非常好。但是，在chrome或edge上，该组件进行渲染，但在视口中消失

编辑：

使用firefox访问JSFIDLE时，可以看到同心圆；使用chrome访问JSFIDLE时，除非在子组件上禁用
position:absolute
，否则不会显示任何内容

研究
根据我对这个问题的研究，只有当
位置：绝对
的孩子找不到具有
位置：相对
的父母时，才会出现这个消失的问题，但是这不是我实现的问题

尝试在chrome上使用开发控制台，当我为所有子组件关闭
position:absolute
时，会出现
div
s，但它们不再堆叠在一起

有人知道为什么会这样吗？为什么它只在firefox上工作，有没有办法解决这个问题，以便可以在所有浏览器上查看该组件

更新
根据公认的答案，解决方案是为包含SVG的子
div
s指定
width
和
height
。这是因为出于某些原因，某些浏览器不会自动计算SVG的宽度和高度。这在这篇文章的评论中以及中都有解释。
你需要给所有的圆加上宽度，因为当你给它们
位置：绝对时，它们变得独立了。因此，修改css代码如下：

.child1, .child2, .child3 {
    position: absolute; /* Turn off to see circles in chrome*/
    top: 0;
    width: 100%;
}

稍后谢谢。
您刚刚错过了child div的宽度和高度`

 .child1, .child2, .child3 {
    position: absolute;
    top: 0;
    width:100%;
    height: 100%;
   }

这是不可复制的，仅是您迄今为止向我们展示的HTML和CSS片段（即使您在CSS中使用的缺失类名得到了补偿）——如果在react中实现这一点改变了与此相关的任何结构，那么你需要找到一种方法来为我们展示一个恰当的例子。@CBroe嗨，谢谢你的提示，我现在正在学习jsfiddle。抱歉，因为我最近才开始使用react，所以我不确定react是如何改变代码结构的。如果您能向我解释一下，可以吗？您的子元素似乎位于正确的位置，但它们都没有宽度-显然是因为您将SVG放入其中。将SVG替换为纯文本，它们将显示在您期望的位置。在该设置中，Chrome似乎不会以任何默认宽度呈现这些SVG，因此您可能需要显式指定一个。（
svg{width:20px；}
或类似的样式添加到您的样式中，使元素按预期显示。）@CBroe谢谢！我现在明白了