0

ページに透かしとして div があります。

div {position: fixed;}

ただし、div でカバーされている領域では、DIV の下のボタンとリンクはクリックできなくなります。要素をクリックするには、DIV をスクロールして移動します。

z-indexbody 要素と透かし div のプロパティを試してみました。

body z-index to 2
watermark z-index to 1

それはうまくいきません。

この問題を解決するにはどうすればよいですか。透かしdivの下にある要素をクリックできるようにします。

4

5 に答える 5

2

これは、知的財産を保護するための貧弱な方法のように思えます。単純な古いクロムでも、要素を直接変更/削除できます。とはいえ、私が知っている2つのアプローチがあります。

1 番目は、非標準のpointer-eventscss プロパティです。

pointer-events:none;

これにより、すべてのクリックがオブジェクトを通過できるようになります。注意:非標準です。MDN リンクの下部にある互換性チャートを参照してください。


もちろん、他の方法はz-index. ページに透かしが必要なだけの場合は、 を使用できますがz-index、インタラクティブにする必要があるボタン/リンクはカバーされません。問題は、z-index が機能するには別の属性が必要なことです: position. 要素に既に position 属性がある場合は、そのままにしておきます。それ以外の場合position:relativeは、ドキュメント フローにとどまるように指定します (フローabsoluteからfixed除外します)。最後に、z インデックス付き要素のツリー レベルも重要です。透かしがルート要素に近いことを確認してください。


結論から言うと、ダメだと思います。HTML/CSS はこのために設計されたものではありませんが、冒険したい場合は試してみてください。

于 2012-12-17T06:57:15.373 に答える
1

z-index は完全に機能しますが、ここでは div が body の子であるため、あなたの場合は機能しません。

あなたができることは次のとおりです。

すべてのコンテンツを次のようなラッパー div に入れます。

<div class="wrap">

次に、透かしを兄弟としてこのdivに追加します（同じレベル）

これらの div の両方に z-index を割り当てます [透かし: 1 と #wrap: 2]

于 2012-12-17T06:56:44.210 に答える
1

あなたの場合z-index、ボディはその中の他のすべての要素の親であるため、動作しない to ボディを与えています。

あなたができることは次のとおりです。

透かしが本体にある場合z-index:1

と

あなたが持っているならwrapper div、z-index:2しかしwrapper div needs "position:relative";

私はここで何かを試しました: http://jsfiddle.net/VJN8F/

使用されるcssはこれです：

p{
  position:relative;
  z-index:2;
 }
div{
  position:fixed;
  bottom:0;
  right:0;
  z-index:1;
  width:200px;
  height:50px;
  border:solid 1px red;
  background:grey;
  opacity:0.5;
}
于 2012-12-17T07:12:03.157 に答える
0

CSS で z-index の数値を大きくしてみてください

body{
    z-index:1000;
    }

watermark{
    z-index:-1000;
}
于 2012-12-17T07:03:45.143 に答える
-1

一番下の div には 0 または -999 、一番上の div には 999 など、より広い数値を試すことをお勧めします。

1 や 2 のような非常に小さな数値を指定すると、ブラウザが正しく反映しない場合があることに気付きました。これは私の個人的な経験に基づいています。だから私はもっと広い数字を与えることを好みます。

于 2012-12-17T06:49:00.053 に答える