为什么我的 iframe 地图显示重叠？

问：

我有一个问题，我使用 iframe 在我的 Web 应用程序中显示我的谷歌地图服务。但是为什么我的 iframe 地图显示重叠？（这意味着现在我在 2 层中有 2 张地图）

在此处输入图像描述

我想为我的问题找到有关 iframe 重叠的解决方案并解决它。谢谢。

这是我的iframe代码

div class="map-responsive">
                        <!-- embed code here -->
                        <iframe id="map_locations" src="#" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>


                    </div>

CSS的

.map-responsive iframe {
    width: 90%;
    height: 380px;
    margin: 0 1rem;
}