html - 如何在不使用相对/绝对定位的情况下让 div 与谷歌地图重叠？

Question

我正在尝试构建的布局包含嵌入的谷歌地图，其中一个 div 的底 Angular 与谷歌地图的右上角重叠。

Proposed Layout <- 查看此图像以了解所需的布局。

目前，谷歌地图 div (#div3) 与 #div2 重叠。我需要这是相反的方式，简单的 z-index 更改不会修复它。 StackOverflow 上的类似问题有一个 position: relative 容器和 position: absolute 内部 div。这个解决方案对我来说是不理想的，因为 Div 2 并不意味着是一个直接的 child 或与谷歌地图相关，而只是一个出现在 map 上方的不相关的 div。我觉得切换到绝对定位会损害布局/潜在的响应能力。

这是 CSS

#div1 {
    background-color: red;
    width: 35%;
    height: 440px;
    float: left;

}

#div2 {

    background-color: green;
    width: 65%;
    float: left;
    height: 670px;
    z-index: 99999999 !important;
}

#div3 {

    width: 55%;
    float: left;
    margin-top: -180px;
    z-index: -20;

    #gmap_canvas, #gmap_canvas:after {
        width: 100%;
        height: 620px;
    }

    #gmap_canvas {
        overflow: hidden;
        position:relative;
    }
}

#div4 {
    background-color: pink;
    width: 45%;
    height: 500px;
    float: left;
}

这是一个代码笔: https://codepen.io/anon/pen/VzaKME

有什么想法吗？

Answer 1

首先，您需要了解 position 和 z-index 属性如何正确工作，请查看以下链接:

https://www.w3schools.com/cssref/pr_class_position.asp https://www.w3schools.com/cssref/pr_pos_z-index.asp

现在回答你的问题。如果您已正确阅读并理解 position 属性和 z-index 属性。您会看到，默认情况下，如果未专门设置元素的属性，则设置为 position:static，z-index 不适用。要使 z-index 正常工作，您的 position 属性需要专门设置为 relative/fixed/absolute。

对于您的解决方案，您需要在您的 CSS 中执行以下操作。

1. 将 position:relative 添加到您的 #div2 类中，并保持原样的 z-index。
2. 接下来，虽然您会看到第 1 点修复会得到您想要的结果，但 #div3 仍然没有专门设置位置以应用它的 z-index 以防万一。所以请添加它，并尝试设置较低但正的 z-index 值，比如 z-index:999;。我们不希望 div 回到底部，以便任何其他控件显示在它上面或在需要时隐藏它。

希望这对您有所帮助。