2

カスタム UI コントロールの上に透明な div を配置して、そのコントロールを「保護」することがあります。たとえば、インタラクティブなデータ グリッドを作成し、その前にダイアログを表示するときなど、それを無効にしたい場合は、グリッドの外側のコンテナーに透明な div を追加し、高さと幅を伸ばして、何もクリックすることはできません。以下の不自然な例でsomeFunction()は、スパンが透明なプロテクターで覆われているため、「Blah」の場所をクリックしても呼び出されません。

HTML:

<div class="control">
  <span class="clickable-example" onclick="someFunction()">Blah</span>
  <div class="protector"></div>
</div>

CSS:

.control {
  position: absolute;
  width: 100px;
  height: 20px;
}

.clickable-example {
  z-index: 0;
}

.protector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 20px;
  z-index: 1;
  background: transparent;
}

ただし、Internet Explorer (10 でも) では、これが機能しないことに気付きました。背景が透明に設定されている div (CSS を使用して明示的に、またはまったく設定しないことで暗黙的に) のように見えますが、div はその下にあるものをブロックしません。これは間違っていると思いましたが、実際には仕様からそれが間違っているとはわかりません。仕様では、下にあるものが「透けて見える」とだけ書かれています。背景がガラスのように振る舞うべきかどうかについては言及されていません。

透明な div の代わりに完全に透明な画像を使用するように戻しましたが、これに関する詳細情報を誰かが持っているかどうか疑問に思いました。(透明な画像で機能するという事実は、それが z-index の問題ではないことを証明しています)。

4

0 に答える 0