Hier sind die Sachen die man zum z-index und Überlappen der Elemente wissen sollte:
Elemente überlappen sich immer in der Reihenfolge wie sie im DOM erscheinen.
Allerdings werden Elemente, die nicht-static (standardmässig haben alle Elemente: position: static) sind immer Elemente die static sind überlappen.
Ebenso, werden ohne z-index floats vor nicht-floats platziert, aber immer hinter anderen positionierten Elementen.
Elemente können sich aus den verschiedensten Gründen überlappen, ob es nun absolute Positionierung ist, oder ein negatives Margin, relative Positionierung hat die Priorität dessen geändert (relative immer über static) und noch so vieles mehr.
Deswegen muss/sollte in Zusammenhang mit z-index auch die CSS-Eigenschaft position und einen anderen Wert als static benutzt werden, um die Anwendung von z-index auch entsprechend zu ermöglichen.
Auch die Ebene bzw. Tiefe der Elemente spielt eine entscheidende Rolle.
So kann ein Kindselement das innerhalb eines Elternelements im DOM liegt welches von einem anderen Element überlappt wird, nicht über dieses andere Element platziert werden, auch wenn der z-index des Kindselements höher ist als der z-index des anderen Elements. Das heisst, der z-index wirkt nur auf die Elemente eines bestimmten Stacks bzw. einer Ebene. Im Beispiel hier müsste also das Elternelement mit den anderen Element um ein z-index konkurrieren für die Platzierung, nicht das Kindselement.
Übrigens, kann man auch negative z-index Werte nutzen!