Css 绝对位置不是相对于其父SVG的

我试图使用

位置：绝对

将一个元素放在

SVG

上，但问题是它与

SVG

元素不相关，它会上升一级。我在这里简化了代码，并添加了

背景

颜色以方便演示

html，
身体{
身高：100%；
}
.col-md-6{
位置：相对位置；
}
.形状{
位置：相对位置；
背景：红色；
利润率：0 250像素；
}
#图片{
位置：绝对位置；
排名：0；
左：0；
}

---

你能这样试试吗。。svg中没有添加任何其他div

HTML

<div class="container">
  <div class="row">
      <div class="col-md-6 mt-4 text-center">
      <div class="svg-image-col">
       <svg class="shape mt-5" xmlns="http://www.w3.org/2000/svg" height="560" width="588">
  <path fill="#fff" stroke="#000" stroke-width="4" d="M294 3l291.246 211.603L474 556.983H114L2.754 214.603z"/>
</svg>
        <div id="pic">
            <img class="img-fluid" src="https://picsum.photos/100" alt="">
        </div>
      </div>
      </div>
  </div>


</div>

---

您的位置不正确，因为您已将边距添加到svg元素中，您可以将它们添加到Absolute图像中

html, body {
    height: 100%;
}

.col-md-6 {
  position: relative;
    padding: 0;
}

.shape {
  position: relative;
  background: red;
  margin: 0 250px;
}

#pic {
  position: absolute;
  top: 0;
  left: 0;
    margin: 0 250px;
    margin-top: 3rem ;
}

---

我知道，这就是我解释的原因，你有什么建议吗？

html, body {
    height: 100%;
}

.col-md-6 {
  position: relative;
    padding: 0;
}

.shape {
  position: relative;
  background: red;
  margin: 0 250px;
}

#pic {
  position: absolute;
  top: 0;
  left: 0;
    margin: 0 250px;
    margin-top: 3rem ;
}