他のdivの背後にあるdivにアクセスしてください

Question

私は、ウィンドウ全体が（Google）マップと私のアプリのクロムで満たされているマップ・インターフェースを試しています（それ以外の何か - menues、controlsなど。）必要ないときは、浮遊したり消えたりします。私はexperimental interfaceを付けました。

ページ全体が読み込まれると、トップメニューはフェードアウトしますが、マウスカーソルがウィンドウの上端に移動すると、表示に戻ってきます。凡例タブウィジェットは折りたたみ可能で移動可能です。

ここで問題があります - タブウィジェットとほぼ一直線に並んだウィンドウの水平スワスの場合、マップはクリッキングできません。地図上のカーソルが、地図にアクセス可能な手から地図にアクセスできない矢印に変わるのを見ることができます。そのバンドでは、マーカのどれもクリック可能ではなく、マップはドラッグ可能でもありません。 Webページで

、階層は、私は-1に#mapのZインデックスを設定しているので、

<div id="map">map</div> 
<header></header> 
<div id="tabs"></div> 
<footer></footer> 

のようなものです。私がそれをしないと、ヘッダーが不規則にマウスオーバーするとフェードアウトしてフェードインします。このヘッダーは、map z-indexが-1に設定されていると正常に動作します。

ヘッダーの後にマップdivを移動すると、ヘッダーが不明瞭になります。言い換えれば、次は

<header></header> 
<div id="map">map</div> 
<div id="tabs"></div> 
<footer></footer> 

を動作しないようになり、なぜ私はマップの部分をクリックすることはできませんよ？ #tabsが#mapをあいまいにしているように、#tabsは約300ピクセル幅にすぎないので、残りの地図には影響しません。

Answer 1

これが機能しない理由は、現在のデザインでtabs divがマップに対して配置されているためです。つまり、tabs divが地図領域と重なっているため、クリックできません。

tabsのdivの位置をrelativeからabsoluteに変更すると効果があります。 absoluteポジショニングを使用すると、tabs divをx座標とy座標に基づいてページの任意の場所に配置できます。

CSSの詳細については、hereを参照してください。