0

CartoDB マップを Web サイトに追加して、位置を固定し、メイン コンテンツの背後に隠れるようにしたいと考えています。私が行ったことは、下の html/css と非常によく似ています。

<style type="text/css">
#1stcontent{
position:relative;
z-index:10;
margin-bottom:100%;
margin-bottom:100vh;}
#map{
height:100%;
height:100vh;
width:100%;
width:100vw;
position:fixed;
top:0;
left:0;
}
#2ndcontent{
position:relative;
z-index:10;
}
</style>
<div id="1stcontent">1st content</div>
<div id="map"><iframe src="//cartodb.com…"></iframe></div>
<div id="2ndcontent">more content</div>

これは、Chrome ではうまく機能しますが、Safari では、#1stcontent または #2ndcontent div のいずれかが、マップの上の最上層に表示されるのではなく、マップの下に隠されます。これは、現在プロジェクトが利用可能なhttp://asyl.ungeruehrt.de/で確認できます。

この動作を修正する方法について、いくつかのヒントをいただければ幸いです。

4

1 に答える 1

0

Safari 7 でこれを解決するにz-indexは、 を通常の状態に設定し、スタイル ブロックに追加の pointer-events:none ルールを与えます。これにより、基になるテキスト/要素を通常どおり選択できるようになります。

その円またはドラゴンにクリック要素がなければ、すべてが期待どおりに動作します。

もちろん、これは を完全に実装していないブラウザのサポートを吹き飛ばすことになりますがCSS 3、それは私たちが最近住んでいる世界です。z-indexそのシナリオでは、いつでも否定的な実装にフォールバックできます。

編集: CSS についてあまり詳しく説明しなくても、2 番目に失敗したシナリオ (ヘッダーの z-index が z-index を持つ要素の上に表示されない) の原因は、ヘッダーに配置が指定されていないことが原因である可能性があります。 static 以外の値。CSS ルール position:relative; を設定してスタック コンテキストを与えることで、おそらくこれを修正できます。要素に適用し、スタイル要素よりも大きい z-index を指定します。 e.g. .dragon{z-index:1;position:absolute;} .circle{z-index:1;position:absolute;} .header{z-index:2;position:relative;}

于 2015-04-15T11:48:23.800 に答える