Html 如何将svg图标保留在div中而不是主视图中

我对HTML/CSS有问题。我正试图完成一项挑战，但我无法将SVGs图像保存在我的分区中

我将发布尝试结果的截图，然后是我得到的

这是我的代码：`

html{
字体系列：“Poppins”，无衬线；
字号：200；
背景：hsl（0,0%，98%）；
}
身体{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
标题{
宽度：40%；
文本对齐：居中；
}
收割台h1{
字号：200；
}
头球有力{
字体大小：粗体；
}
主要{
高度：80vh；
显示：网格；
网格模板柱：1fr 1fr 1fr；
}
.卡片{
位置：静态；
显示器：flex；
弯曲方向：立柱；
背景：白色；
边界半径：9px；
盒影：8px 1px 20px灰色；
左侧填充：40px；
右边填充：40px；
利润率：20px；
}
.卡片：第n个孩子（1）{
边框顶部：5px实心hsl（180,62,55%）；
位置：相对位置；
最高：50%；
}
.卡片：第n个孩子（2）{
边界顶部：5px固体hsl（0,78%，62%）；
} 
.卡片：第n个孩子（3）{
边框顶部：5px实心hsl（212,86%，64%）；
位置：相对位置；
最高：50%；
} 
.卡片：第n个孩子（4）{
边框顶部：5px实心hsl（34,97%，64%）；
网格柱：2；
}
.卡svg{
位置：绝对位置；
底部：10%；
右：10%；
}
@媒体屏幕和屏幕（最大宽度：360px）{
html{
字体大小：12px；
}
标题{
宽度：100%；
利润底部：10%；
}
主要{
高度：自动；
显示：块；
}
.卡片{
高度：200px；
}
}

前端导师|四卡功能部分
尝试将
卡
类中的
位置：静态
更改为
位置：相对

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 9px;
    box-shadow: 8px 1px 20px grey;
    padding-left: 40px;
    padding-right: 40px;
    margin: 20px;
}

你的
.cards
应该有一个
位置：相对现在它们是
位置：静态意味着svg的位置不依赖于卡。这是否回答了您的问题？