Negativer z-index, der Links ausschließt

Question

Ich versuche, eine Seitenleiste auf meiner Seite einzufügen. Der Hauptkörper-Container auf der Seite hat einen Box-Schatten, so dass ich die Seitenleiste zu erscheinen, als ob es aus unter dem Container kommt, so dass der Schatten auf sie sein wird. Ich habe meine Seitenleiste div ein direktes Kind des Body-Containers (die Position hat: relativ), und setzen Sie es Position absolut, dann positioniert es mit der oberen und rechten Position Werte. Ich habe es an der richtigen Stelle, dann wandte eine negative z-Index, so dass es unter dem Körper sein würde. Das Problem ist, dass dadurch alle Links, die ich in der Seitenleiste platziert habe, in allen außer IE9 nicht anklickbar sind. Ich weiß nicht, wie ich das sonst erreichen kann, ohne die Links zu zerstören. Hat jemand eine Idee?

Ich würde einen Link zu einer Seite mit einem Beispiel posten, aber ich bin gerade dabei, die Seite zu ändern, so dass Sie, wenn Sie darauf klicken, wahrscheinlich nicht sehen würden, worauf ich hinaus will. Ich werde versuchen, es besser zu erklären.

Der Body-Container ist 720px breit und hat einen automatischen Rand, so dass er auf der Seite zentriert erscheint. Er ist relativ positioniert.

Die Seitenleiste ist ein direktes Kind (das erste Kind) des Body-Containers. Sie hat eine feste Breite, eine absolute Position, ein Padding usw. und verfügt über eine obere und rechte Position sowie einen z-Index von -100.

Hier ist ein Link:

http://reachchallenges.infectionist.com

Answer 1

Sie können das Negativ entfernen z-index und geben eine innerer Schatten in der Seitenleiste, die dem äußeren Schatten der .body Element.

Sie müssen es ausprobieren, um zu sehen, wie es sich auf den Rand der Seitenleiste auswirkt.

Answer 2

Ich verstehe nicht ganz, welcher Effekt gewünscht wird, aber vielleicht kann diese einfache Spielerei einige Hinweise geben, wie man Probleme dieser Art angehen kann.

jsfiddle

Damit die Links funktionieren, müssen Sie den z-index wieder auf eine positive Zahl setzen. Ihr CSS sieht dann so aus:

.z-index1{
    z-index: 1 !important;
}

und Ihr JS sollte es sein:

$("#div-on-top").click(function(){
    $("#div-on-bottom").toggleClass("margin");
    $("#div-on-bottom").toggleClass("z-index1");
});

Anklicken von #div-on-top wird es aus dem Weg räumen und enthüllen #div-on-bottom und es wird auch bringen #div-on-bottom nach oben, so dass Links anklickbar sind.

Ich habe auch Schatten auf die #div-on-top und es sah gut aus (für mich; siehe jsfiddle).