如何在不使用相對/絕對定位的情況下讓Google地圖覆蓋Google地圖？

我正在嘗試構建的佈局合併了嵌入的Google地圖，其中一個div的底部角落與Google地圖的右上角重疊。如何在不使用相對/絕對定位的情況下讓Google地圖覆蓋Google地圖？

Proposed Layout < - 看看這張圖片看看所需的佈局。

目前，谷歌地圖div（＃div3）重疊＃div2。我需要這種方式，一個簡單的Z-索引更改不會解決它。 StackOverflow上的類似問題有一個position: relative容器和position: absolute內部div。這個解決方案對我來說並不合適，因爲Div 2並不是直接的孩子或與Google地圖有關，而只是一個不相關的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; 
}

這裏是一個Codepen： https://codepen.io/anon/pen/VzaKME

任何想法？

來源

2017-07-31 user8345012

請問您可以添加一個codepen或jsfiddle作爲您的問題的例子，供我們查看。 –

@NasirT當然，在這裏。 https://codepen.io/anon/pen/VzaKME – user8345012

我加了我的答案。請檢查，如果幫助，然後標記爲答案。謝謝。 –

首先，你需要了解如何位置和z索引屬性正常工作，請查看以下鏈接：

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屬性需要專門設置爲相對/固定/絕對。

對於您的解決方案，您需要在您的css中執行以下操作。

將position:relative添加到您的#div2類中，並將z-index保持原樣。
接下來，雖然你會看到第1點修正會得到你想要的結果，但仍然#div3沒有專門設置位置來應用它的z-index以防萬一。所以請添加，並嘗試設置低，但正指數的Z值爲z-index:999;。我們不想讓div爲了其他任何控件而在底部顯示或隱藏它，如果需要的話。

希望這會有所幫助。

來源

2017-07-31 15:05:27

完美，謝謝！這給了預期的結果而不損害佈局。不知道它會如此簡單。我也很感謝關於定位和何時可以使用z-index屬性的說明。 – user8345012

沒問題。樂意效勞。 –

如何在不使用相對/絕對定位的情況下讓Google地圖覆蓋Google地圖？

回答

相關問題