Html CSS：如何以一列覆盖另一列的方式组织两列？

我想有一个页面分为两列，其中一列应该覆盖在另一列。我没能做到这一点，所以我请你们帮忙。请忽略凌乱的svg代码，它是从inkscape复制的，因为我想在其中包含一些可单击的元素

第一列/左列（测试列）仅在存在要迭代的列表时出现，否则将隐藏。我在下面的脚本中使用的flexbox解决方案的问题是，当第一列出现时，第二列被偏移。我想它只是出现在“上面”的黑色正方形周围的区域页面，没有移动任何其他元素。我怎样才能做到这一点

.svg\u容器{
宽度：100%；
背景：#fff；
}
.行{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
弹性：1；
边框：2件纯红；
}
.测试{
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}
.svg{
宽度：100%；
弹性：5；
高度：90vh；
}

列表标题

要素1

要素2

要素3

要素4

要素5

广场
广场
门诊化验室
86平方米。

由于您希望侧边栏“覆盖”svg区域（内容），因此它需要具有

位置：绝对

。以下是一个例子：

函数切换（）{
const sidebar=document.querySelector（'.test.column'）；
侧边栏.classList.toggle（'hide'）；
}

html，主体，主体{
高度：100vh；
}
.svg_容器{
宽度：100%；
背景：#fff；
身高：100%；
}
.test.column{
背景颜色：灰色；
位置：绝对位置；
身高：100%；
排名：0；
左：0；
弯曲方向：立柱；
弹性基准：100%；
弹性：1；
边框：2件纯红；
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
宽度：200px；
}
.column.hide{
显示：无；
}
.内容{
背景色：青色；
身高：100%；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.svg{
宽度：100%；
弹性：5；
高度：90vh；
}

列表标题

要素1

要素2

要素3

要素4

要素5

显示/隐藏

能否添加一张小图纸，显示您在这两种情况下想要实现的目标？（有/没有侧边栏）@TasosBu它是doneThanks，我能够使用绝对位置和z-index获得我想要的。不过不需要flex的东西。