Webページの一部のライトボックス

Question

私は、Webサイトを介してユーザーを歩くためのシステムを作成しています。間違いを避け、ユーザーに焦点を当て続けるために、ページ上のすべてのものを、私がそれらとやりとりしたいもの以外に暗くしたいと思います。私はまた、ポップアップではなく、その場でこれをやりたい私はこれに近づい

方法はにbodyにdivを追加し、それがスタイルだ設定することでした：

width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    background-color: #000; 
    opacity: 0.5; 
    -ms-filter:'alpha(opacity=50)'; 
    filter: alpha(opacity=50) 
    z-index: 1000 

私はその後、私はそれよりも高く/ライトボックスを強調したかった要素のz-indexを設定しました付属のdiv。この場合、私はそれを1001に設定しました。私の主な使用事例では、formを強調したかったのです。この問題は、個々のチェックボックスや他のフィールドだけが、目立たないでクリック可能になったことでした。フォームを含むボックスはまだ暗かった。背景を含む要素全体をハイライト表示する方法はありますか？

Answer 1

HTMLが表示されていなくても正確ではありませんが、これはz-indexのようなものです。

z-indexはabsolute、relativeまたはfixedのいずれかのpositionを持つ要素に適用されます。デフォルトはstaticです。

「動作していない」要素の位置を明示的にrelativeに設定してみてください。