他の要素の子要素の下に要素を描画します

Question

Googleマップの上に折り目のオーバーレイを作成して、マップを表の実際のマップのように見せようとしています。折り目は、マップの上に位置する2ピクセルラインです。これはうまく見え、地図とのやりとりをあまりにも邪魔することはありません。500本の垂直線のうち6本しかクリックできず、より良いブラウザではext-forwardと呼ばれるjavascriptライブラリを使用してクリックが転送されます。

マップ上に配置されたマーカーが折り目の下に描画されているにもかかわらず、3Dスタイルの影が残っているという問題があります。

マーカーはマップdivの子であり、折り目はマップdivと同じレベルにあります。 IEの折り目と地図は兄弟です。マップはz-インデックス0であり、マーカーはz-インデックス<です。どんなz-インデックスであっても、私は折り畳みを与えます。これを変更する方法はありますか？

Answer 1

z-indexがマーカーよりも小さく地図自体よりも大きいマップdivの子として折り目を追加する必要があるようです。 JavaScriptまたはjQueryを使用して、必要に応じて折り畳みオブジェクトをマップオブジェクトに追加します（マップオブジェクトの内容が特定のポイントで更新されると仮定します）。

Answer 2

ここでは、物事を描く方法についてはthe specです。私はそれが正のゼロ以外のZ-インデックスを持つ2つの絶対的に配置された項目をカバーするルール9だと思うが、正直なところ、あなたの状況のすべてのオブジェクトがどのように配置されているか、そしてツリーのどこにあるかどのルールを適用すべきかを正確に知る必要があります。一部のサンプルHTMLは、あなたの特定の状況のルールを人々が解釈するのに役立つかもしれません。

もっとも簡単な解決策は、マーカーと同じ親に折り目を入れて、Z軸を使ってzオーダーを正確に制御するために絶対位置と絶対位置を確認することです。彼らがポジションではない場合：絶対、それはおそらく事を制御する子オーダーです。