我正在尝试构建的布局包含一个谷歌地图嵌入，一个div的底角与谷歌地图的右上角重叠。
Proposed Layout ＆lt; - 看一下这张图片，看看所需的布局。
目前，谷歌地图div（＃div3）与＃div2重叠。我需要这个反过来，简单的z-index更改不会修复它。 StackOverflow上的类似问题有一个"DatabaseManagerMySQL.php?operation_type = insert"容器和position: relative内部div。这个解决方案对我来说是不理想的，因为Div 2不是一个直接的孩子或与谷歌地图有关，而只是一个出现在地图上方的无关div。我觉得转换到绝对定位会影响布局/潜在的响应能力。
这是CSS
position: absolute这是一个Codepen： https://codepen.io/anon/pen/VzaKME
有什么想法吗？
答案 0 :(得分：0)
首先，您需要了解位置和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中执行以下操作。
position:relative添加到#div2类。#div3没有专门设置位置以应用它的z-index以防万一。所以请添加它，并尝试设置z-index的低值但正值为z-index:999;。我们不希望div返回到底部，以便在其上方显示任何其他控件或在需要时隐藏它。希望这有帮助。