a href-tag nicht funktioniert aufgrund von z-index

Ich habe ein div mit der Klasse "header", die die z-index-Wert als 1. Nach diesem div habe ich ein div für das logo in Anker-tags. Aber das problem ist ich dont erhalten alle Zeiger cursor auf "logo".
Wenn ich entfernen Sie den z-index der header-ich bin in der Lage, klicken Sie auf es.
Ich habe .header wie folgt:

.header{
  z-index:1;
}

Hier ist das Ergebnis bin ich immer:

Ausgabe ich bin immer...

Nur nehmen die Kommentare in der css-Teile, die ich gegeben habe, für z-index. Sie werden in der Lage, klicken Sie auf das logo wieder.

Ist es ein Weg, um die Anker-tags arbeiten mit dem z-index-Wert als 1 auf 'header'?

  • Ich glaube nicht, dass Sie können hinzufügen, z-index-Eigenschaft anchor-tag, aber wenn Sie dies tun wollen, können dies tun, durch die Verwaltung der z-index-Wert von element hinter Anker-tag. können schauen Sie sich dieses [link][1], auch gibt es eine Möglichkeit über ein Bild. [1]w3schools.com/cssref/tryit.asp?filename=trycss_zindex
  • Danke Dipak... ich denke u r Recht....
  • Habe eine Lösung als auch eine alternative
InformationsquelleAutor Chetana Kestikar | 2013-01-10
  1. 3

    Warum sind Sie die Positionierung Dinge absolut? Wenn Sie möchten, dass Ihr code funktioniert, müssen Sie Ihre position, eine tag-relativ oder absolut und geben Sie einen höheren z-index:

    http://jsfiddle.net/pThNz/11/

    a {position:relative; z-index:2;}

    Ansonsten könnte man versuchen so etwas schöner code; Stoppt Sie aus immer in einem z-index Alptraum später auf der Straße; und hört einfach leere divs erstellt wird überall:

    http://jsfiddle.net/pThNz/10/

    <div class="header">
  <a href="http://therepublik.ambibytes.com/" title="Home">
    <span class="leftCorners">
      <span class="rightCorners">
        <span class="text">The fuzzy Republik</span>
      </span>
    </span>
  </a>
</div>

    CSS:

    .header a {margin:20px; font-size: 20px; color: black; text-transform: uppercase; text-decoration:none; text-align:center; }
.header a,
.header span {display:block; width:283px; height:100px;}
.leftCorners {background:url(http://therepublik.ambibytes.com/wp-content/themes/republik/imgs/left_corners.gif) left top no-repeat;}
.rightCorners {background:url(http://therepublik.ambibytes.com/wp-content/themes/republik/imgs/right_corners.gif) right top no-repeat;}
.header .text {padding-top:45px; height:50px;}
    • Danke für die Hilfe, Pete... Aber meine Forderung ist, dass der text im logo sollte sich hinter den hintergrund des div 'header'. Ist das möglich?
    • Sie wollen also den text (und Kanten?) hinter dem header, aber der link oben ist?
    • jsfiddle.net/pThNz/12
    • ja... und ich kann nicht setzen Sie das logo in der Kopfzeile-Abschnitt, wie es behoben werden muss und das logo ist nicht fest. Das ist der Grund, warum die immer Durcheinander...
    • Vielen Dank Pete.. es ist das gleiche, was ich möchte... 🙂
    InformationsquelleAutor Pete
  2. 2

    Nur hinzufügen, dass pointer-events:none, um die Eltern, dass die Blockierung der link Klick (also der header).

    Hier ist dein code aktualisiert:
    https://jsfiddle.net/pThNz/31/

    .header {
    pointer-events:none
}
    InformationsquelleAutor Mike
  3. 1

    z-index nicht auswirken-Elemente, die keine position:absolute, relative oder static

    .header{
  z-index:1;
  position:relative;
}
    InformationsquelleAutor Jye Lewis
Schreibe einen Kommentar