css - z-index と遠く離れた要素

Question

基本的に私がやろうとしているのは、本体に div を配置し、すべての上に固定位置のフロートを配置することです。これは私が問題を抱えている次の部分です。これは私が使用するコードです（LESSで）

.fadeIt{
    opacity:0;
    cursor:pointer;
    .transition (opacity .5s linear);
    z-index:-1;
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    &.cover{
        z-index:101;
    }
    &.open{
        opacity:1;
    }
}

これは機能し、要素のクリック イベントで表示を切り替えることができますが、クリックした要素を DOM 内の場所に関係なくプルしたいと考えています。「アクセント」効果を与えます。現在、fadeIt 要素は body タグのすぐ近くにあります。これは「よりクリーン」だと感じていますが、変更することは可能です。

最後に見たいのは、fadeIt 要素の可視性をトリガーする要素をクリックすると、クリックされた要素が DOM 内と同じ位置にその上に表示されることです。