Css 如何使SVG和按钮在缩放时不重叠？

在缩小比例时，我很难保持svg和flexbox按钮之间的比例。我想使用flexbox，这样我就可以随时控制这个英雄镜头上的按钮和SVG覆盖

有没有更好的方法来实现这一点，还是我完蛋了？ 如有任何建议，将不胜感激

*{
保证金：0；
填充：0；
框大小：边框框；
}
.ob英雄容器{
位置：相对位置；
}
.herobtn容器{
宽度：80%；
最大宽度：800px；
保证金：0自动；
位置：绝对位置；
最高：60%；
右：0；
底部：0；
左：0；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.SVG容器{
宽度：80%；
最大宽度：800px；
保证金：0自动；
位置：绝对位置；
前-20%；
右：0；
底部：0；
左：0；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.herobtn包装器{
边框：2倍实心透明；
柔性生长：1；
}
herobtn1先生{
背景色：#000；
颜色：#fff；
填充：10px；
/*边缘：.1米*/
文本对齐：居中；
}
/*平板电脑*/
@介质（最小宽度：30em）和（最大宽度：50em）{
.herobtn包装器{
弹性基准：50%；
}
}
@介质（最大宽度：50em）{
.herobtn容器{
位置：相对位置；
宽度：100%；
}
}
/*流动的*/
@介质（最大宽度：30em）{
.herobtn包装器{
弹性基准：50%；
}
}

商店女装
商店男装
商店小孩
观看视频

您可以将

svg

容器和

按钮

容器包装在一起。这样可以确保它们不会重叠

例如：

*{
保证金：0；
填充：0；
框大小：边框框；
}
.ob英雄容器{
位置：相对位置；
}
.覆盖{
宽度：80%；
最大宽度：800px；
位置：绝对位置；
排名：0；
左：0；
右：0；
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
身高：100%；
}
.SVG容器{
页边距底部：1em；/*用于演示的样式*/
}
.herobtn容器{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.herobtn包装器{
边框：2倍实心透明；
柔性生长：1；
}
herobtn1先生{
背景色：#000；
颜色：#fff；
填充：10px；
/*边缘：.1米*/
文本对齐：居中；
}
/*平板电脑*/
@介质（最小宽度：30em）和（最大宽度：50em）{
.herobtn包装器{
弹性基准：50%；
}
}
@介质（最大宽度：50em）{
.herobtn容器{
位置：相对位置；
宽度：100%；
}
}
/*流动的*/
@介质（最大宽度：30em）{
.herobtn包装器{
弹性基准：50%；
}
}

商店女装
商店男装
商店小孩
观看视频

您不能允许容纳svg文本的

.herosvg容器

增长到按钮的起点以下

.svg容器

规则中的此更改将使它们不会重叠

  top: 0;               /*  changed  */
  height: 60%;          /*  changed  */
  /*  bottom: 0;            removed  */

堆栈片段

*{
保证金：0；
填充：0；
框大小：边框框；
}
.ob英雄容器{
位置：相对位置；
}
.herobtn容器{
宽度：80%；
最大宽度：800px；
保证金：0自动；
位置：绝对位置；
最高：60%；
右：0；
底部：0；
左：0；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.SVG容器{
宽度：80%；
最大宽度：800px；
保证金：0自动；
位置：绝对位置；
顶部：0；/*已更改*/
高度：60%；/*已更改*/
/*底部：0；已删除*/
右：0；
左：0；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.herobtn包装器{
边框：2倍实心透明；
柔性生长：1；
}
herobtn1先生{
背景色：#000；
颜色：#fff；
填充：10px；
/*边缘：.1米*/
文本对齐：居中；
}
/*平板电脑*/
@介质（最小宽度：30em）和（最大宽度：50em）{
.herobtn包装器{
弹性基准：50%；
}
}
@介质（最大宽度：50em）{
.herobtn容器{
位置：相对位置；
宽度：100%；
}
}
/*流动的*/
@介质（最大宽度：30em）{
.herobtn包装器{
弹性基准：50%；
}
}

商店女装
商店男装
商店小孩
观看视频

我会的，但我需要按钮退出手机视频。另外，有时我希望能够以不同的方式浮动SVG和Flexbox按钮。因此，它们都需要是我喜欢的单独控件。你仍然可以使用媒体查询隐藏按钮容器？看看我在最终结果中试图实现什么。