Wie zu ermöglichen, klicken Sie auf <a> mit Z-Index von -1

Ich versuche, einen Benutzer auf einen Link klicken, die einen Z-Index von -1 hat. Ich möchte, dass der Rest des Inhalts der Seite beim Herunterscrollen über den Link geht, was perfekt funktioniert, aber ich kann nicht auf den Link klicken.Wie zu ermöglichen, klicken Sie auf <a> mit Z-Index von -1

HTML:

<html> 
    <body> 
    <div id = "aWrap"> 
    <a href = "#foo">I should be able to click this</a> 
    </div> 
    <div id = "foo"> 
     <p>Rest of page content</p> 
    </div> 
    </body> 
</html>

CSS:

body { 
    margin: 0; 
    padding: 0; 
} 

#aWrap { 
    height: 100vh; 
} 

a { 
    display: block; 
    z-index: -1; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

#foo { 
    background-color: black; 
    color: white; 
    padding: 40vh; 
    text-align: center; 
}

Hier ist mein Stift: http://codepen.io/anon/pen/XKNRXx?editors=1100

Quelle

2016-06-22 user5824608

Gibt es einen besonderen Grund, warum Sie "zIndex" von Anker auf "-1" setzen? Wenn der Inhalt tatsächlich überlagert ist, kann der Benutzer den Link nicht sehen. – choz

Wenn Sie den Z-Index entfernen, sollten Sie in der Lage sein, darauf zu klicken, wenn Sie nach unten scrollen. – Jennift

@choz Der Inhalt würde nur den Anker überlagern, wenn der Benutzer nach unten scrollt. – user5824608

Hier ist eine aktualisierte codepen arbeiten als Sie erwarten:

http://codepen.io/thecox/pen/xORdEe?editors=1100

Wenn Sie eine z-index von -1 verwenden, wird das Element unter allen Elementen platziert, einschließlich der übergeordneten Element. Die Aktualisierung auf z-index: 0 und position: relative/z-index: 1 auf dem überlappenden Container korrigiert dies. Nur Elemente, die positioniert werden, arbeiten mit der Eigenschaft z-index.

Quelle

2016-06-22 05:11:36

hinzufügen z-index:0-a Tag und die relative Position zur nächsten div hinzufügen mit z-index:1 wie folgt aus:

a { 
     display: block; 
     z-index: 0; 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
    } 

    #foo { 
     background-color: black; 
     color: white; 
     padding: 40vh; 
     text-align: center; 
     position:relative; 
     z-index:1 
    }

Quelle

2016-06-22 05:09:57

Wie zu ermöglichen, klicken Sie auf <a> mit Z-Index von -1

Antwort

Verwandte Themen