Dropdown menu covered by OSM map on my website

Question

English version below

Hallo, ich möchte die OpenStreetMap in den Webauftritt meines Sportvereins integrieren. Bisher nur in einer Testversion auf einem anderem Server. Dass läuft soweit auch ganz gut, doch verdeckt die Karte mir das Dropdown Menu, so dass einige Teile nich lesbar sind. Ich habe bereits mit der z-index Angabe in CSS experimentiert, doch konnte ich das Problem damit nicht lösen.

Kann mir bitte jemand helfen? An die Seite gelangt Ihr mit dieser Adresse: http://nw-hamburg.michaliczak-it.de/index.php?mwahl=NTc=

Da die Testseite nicht öffentlich ist, müsst Ihr dafür folgendes eingeben. Nutzer test und Passwort test123

Vielen Dank Andreas (webmaster)

=========== english version =========

Hello,

I have implemented the OpenStreetMap Map in my sports club webpage (actual in the testpage). Unfortunatly parts of the dropdown menu, are not visible because the map is above(in front) of the menu layer. I have tried to put the menu layer in front bei z-index (css) value increasing, but it wont help.

Do anyone have an idea to solve this problem?

You can find the page at: http://nw-hamburg.michaliczak-it.de/index.php?mwahl=NTc=

Due to secured entry, please enter Username: test and password: test123 It's a german spoken webpage...

Best regards an thank you Andreas (webmaster)

Accepted Answer

See this: https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/ - your .menu elements are not positioned. Also, you are setting z-index to 100 (?) - however, the tiles are using z-index up to 1000, which then overlays your menu.

.menu {
  position: relative;
  z-index: 2000;
}

seems to fix this.

Dropdown menu covered by OSM map on my website

Related questions