1

z-index 値が 1 のクラス「ヘッダー」を持つ div があります。その div の後、アンカー タグにロゴの div があります。しかし、問題は、「ロゴ」にポインターカーソルが表示されないことです。ヘッダーの z-index を削除すると、それをクリックできます。次のように .header があります。

.header{
  z-index:1;
}

ここに私が得ている結果があります:

私が得ている出力...

z-index に指定した css パーツのコメントを取り除いてください。ロゴをもう一度クリックできるようになります。

「ヘッダー」で z-index 値を 1 として動作するアンカー タグを取得する方法はありますか?

4

3 に答える 3

4

リンクのクリックをブロックしている親に pointer-events:none を追加するだけです (つまり、ヘッダーに)。

更新されたコードは次のとおりです: https://jsfiddle.net/pThNz/31/

.header {
    pointer-events:none
}
于 2015-11-27T16:06:50.810 に答える
3

なぜあなたは物事を絶対的に配置しているのですか？コードを機能させたい場合は、タグを相対または絶対に配置し、より高い z-index を指定する必要があります。

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

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

そうでなければ、より良いコードのためにこのようなことを試すことができます。後で z-index の悪夢に陥るのを防ぎます。空のdivがどこにでも作成されるのを止めるだけです:

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;}
于 2013-01-10T11:16:00.633 に答える
1

z-index は、position:absolute、relative、または static ではない要素には影響しません

.header{
  z-index:1;
  position:relative;
}
于 2013-01-10T10:48:33.177 に答える