将 SVG 堆叠在 DIV 中

Question

我希望将这三个图像堆叠在一起。我不在乎它们是否显示为动画，并且两个图像会从每个图像的侧面水平弹出。

然而我遇到了一个问题。

请参阅附图：

所有三个 SVG 都包含在以下结构中：

<ImageContainer>
  <MainIcon />
  <JobListingIcon />
  <SingularListing />
</ImageContainer>;

这是在弹性框中：

const ImageContainer = styled.div`
    width: 90%;
    height: 400px;
    margin-top: 20px;
    background-color: #636388;

    display: flex;

    align-items: center;
    justify-content: center;
    flex-direction: row;
`;

我不明白为什么它们以这种方式显示，我尝试将所有 3 个 SVG 绝对定位，但什么也没有。

这些堆叠的方法是什么？它不是一个弹性盒子吗？可能类似于 MUI 网格之类的东西？

对不起！

Answer 1

像“on top of other”这样的短语的问题在于它是不明确的。你的意思是：

1. 垂直排列在页面上，或
2. 一个覆盖另一个

听起来你可能指的是第二个。您可以通过绝对定位来实现这一点。

parent    <-- make this "position: relative;"
   child  )     
   child  )  make either (or both) of these "position: absolute; top: 0;"

如果这些child元素是<svg>elements，那么您还需要制作它们display: block，因为display: inline-block默认情况下是 SVG。

演示

parent    <-- make this "position: relative;"
   child  )     
   child  )  make either (or both) of these "position: absolute; top: 0;"

.parent {
  position: relative;
  width: 100px;
  height: 150px;
}

svg {
  display: block;
}

.svg-two {
  position: absolute;
  top: 0;
}