web-dev-qa-db-ja.com

Firefoxで＆-IE

私はテキストリンクを部分的に透明な画像の上に表示しようとしていますが、画像は単純な色の背景の上にあります。ページの印刷時にリンクテキストと画像を印刷したいが、色付きの背景は印刷したくない。 （これがbackground-imageプロパティを使用していない理由です）

問題は、リンクが画像の上に表示され、画像が必要に応じて背景の上に表示されても、リンクをクリックできないことです。リンクが上に表示される場合、マウスイベントの影響を受けやすいはずです...

これは、少なくともFirefox 6.0（Windows + Linux）、Firefox 3.6（Windows）、およびInternet Explorer 7のブラウザーで発生します。

これが私のHTML/CSSに問題があるのか​​、それともブラウザに問題があるのか​​教えてください。

問題を示すためのHTMLを次に示します。

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  

      <a style="padding:50px; color:#fff;z-index:0;" href="#">Can you click me?</a>

    </div>

  </body>

</html>

乾杯！

アレックス

htmlcssz-index
27
Alex

この問題は、主に負のZインデックス値を使用して発生します。これにより、親divがマウスイベントをキャプチャしているようです。正のインデックスを使用し、position:relative期待される動作を得るためのリンクへ。明示的な位置付けがなければ、z-indexは何もしません。

56
shanethehat

私の場合、CSSで説明されていない pointer-events （具体的には値all）を扱っていたため、別の（先祖ではない！ ）DOMの一部。

すべて削除しましたpointer-events CSSから。

この質問にはすでに受け入れられている答えがありますが、私の症状はOPと一致しているので、私のヒントは私のような将来の闘争者に役立つかもしれません。

6
The Red Pea

2つのメモ：

1）z-index属性は、配置された要素（絶対、相対、または固定）でのみ使用できます。あなたの要素はそうではありません。

2）[編集：関連なし]上の要素（with z-index：0）は背景要素（with z-index ：-2）。

次のように動作します。 http://jsfiddle.net/5MpFn/

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  



    </div>

      <div style="position: absolute; top: 0;left: 0; padding:50px; z-index:0;" >
      <a href="#" style="color:#fff;">Can you click me?</a>      
      </div>

  </body>

</html>
4
jjmontes

上記の解決策はどれも私の特定の問題には効果がありませんでした。最初に上記のソリューションを使用することをお勧めします。それが機能しない場合は、ポインターイベントをnoneに設定します（IE <= 10では機能しません）。

.some-horizontal-container {
  pointer-events: none;
}

visibility: hiddenを使用して、その下のクリック可能な要素をオーバーレイするdivに使用することもできます。

詳細については、この記事をご覧ください： https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/

1
connect2Coder