2009-05-29 11 views
13

ページに2つのレイヤーがある場合、最初のレイヤーの2番目のレイヤーがオーバーラップしている状態で、分割して「クリックスルー」することは可能ですか?layers/divsをクリック

私は第2層が重なっている第1層にリンクを有しており、リンクがクリック可能になるのを止めています。レイヤーを表示させる方法はありますか?クリックスルー、それでもリンクはクリック可能ですか?

編集:ここでは

は、HTMLやスタイルシートで、一例です。

レイヤー3のヘッダーをインライン化するとテストリンクが解除できなくなりますが、その下位レイヤーは正常です。これを修正する方法はありますか?

<title>Test</title> 
<link rel="stylesheet" href="test.css" type="text/css"> 
<body> 
<div id="Layer0"> 
<div id="Layer1" class="Layer1"> 
<h3 align="left">Brands</h3> 
</div> 
<div id="Layer2" class="Layer2"><h1>TEST</h1> 
<div id="rightlayer"> 
<a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p> 
</div> 
</div> 
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1> 
</div> 
</div> 
</body> 
</html> 

とCSS

#Layer0 { 
    width:100%; 
    height:100%; 
} 
body { 
    margin:10px 10px 0px 10px; 
    padding:0px; 
    color:#999999; 
    font-family:"Trebuchet MS",arial,sans-serif; 
    font-size:70.5%; 
} 
#Layer1 { 
    position:absolute; 
    left:10px; 
    width:200px; 
    margin-top:17px; 
    font-size:1.0em; 
    padding-left:12px; 
    padding-top:8px; 
} 
#Layer2 { 
    background:#fff; 
    margin-left:199px; 
    color:#000; 
} 

#rightlayer { 
float:right; 
} 
.Layer3 { 
position:absolute; 
top:67%; 
padding:20px; 
width: 100%; 
} 

答えて

5

それはあなたがdiv要素が彼らの現在のxに滞在したい場合は、Yは不可能である(そして最も重要な)Z - 唯一の "トップ"レイヤーはクリック可能です。


補遺ポストOP編集:CSSレイアウトの

だと思いますが、物理的に紙のビットを使用していたかのように(あなたがすべてのあなたの「層」のdivに別のを与える場合、これは視覚化しやすいずっとです背景色)。レンダリングエンジンは、検出した各要素に対して、与えた次元の紙を切り取る(または動かします)。これは、ページの紙切れごとにページの上に置くような順序でこれを行います。最後の項目が上にくるでしょう。

レンダリングエンジンに、第3のdivを第2のものと重なる位置に配置するように指示しました。そして今、あなたはカバーされたコンテンツを "見る"ことができると期待しています。紙では動作しませんが、HTMLでは動作しません。透明だからといって、スペースを取っていないわけではありません。

何かを変更する必要があります。

(正直にクリーンアップすることができたが、私は他のマークアップがありますと仮定します、あなたがそれを正当化され、私たちを示していない)あなたのCSSとマークアップを見てみると簡単に勝利のいくつかの方法があります:

1)。 レイヤー3のZインデックスを-1に設定すると、レイヤーの順序を(遭遇した)デフォルトから変更することができます。これはレイヤー3の全体をページの残りの部分の下に移動するだけなので、隠されたものは公開されますが、内容によってはその逆もあります。

2)。 幅をから100%に変更します。 80%、またはpos:absを使用した可能性がより高く設定されています。左:0ピクセル、右:199ピクセル、 (私は、レイヤ2上のパディングが意図した列の幅であると推測しています)。これのコストは、Layer3がもはや100%の幅ではないことです。

3)。 Googleの "CSSの列のレイアウト"とあなたが必要なものを反映し、それを適応させるパターンを見つける。行うことができるすべてのCSSレイアウトはすでに100万回も行われています。あなたの問題を解決する標準的な手法が存在します。経験を蓄積していないとCSSは難しいので、他の人の経験を活用してください。車輪を改造しないでください。

0

いくつかのコードを見ることなく伝えるのは難しいです。

下のレイヤーにz-インデックスを設定してみることもできますが、これは絶対、相対、または固定(位置:絶対)で配置された要素で機能します。

ポジションを追加します:


編集コード見た後、相対。 z-インデックス:100; 〜に#LayLayer。

また、幅:100%を.Layer3から削除することもできます。


コードをリファクタリングして、#rightLayerと.Layer3の2列レイアウトにすることをおすすめします。

CSS

#Layer0 { 
    width:100%; 
    height:100%; 
} 
body { 
    margin:10px 10px 0px 10px; 
    padding:0px; 
    color:#999999; 
    font-family:"Trebuchet MS",arial,sans-serif; 
    font-size:70.5%; 
} 
#Layer1 { 
    width:200px; 
    margin-top:17px; 
    font-size:1.0em; 
    padding-left:12px; 
    padding-top:8px; 
} 
#Layer2 { 
    background:#fff; 
    margin-left:199px; 
    color:#000; 
} 

#rightlayer { 
float:right; 
} 
.Layer3 { 
} 

HTML

<div id="Layer0"> 
    <div id="Layer2" class="Layer2"> 
     <h1>TEST</h1> 
    </div> 
    <div id="Layer1" class="Layer1"> 
     <h3 align="left">Brands</h3> 
    </div> 
    <div class="content"> 
     <div id="rightlayer"> 
      <a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p> 
     </div> 
     <div id="Layer3" class="Layer3"> 
      <h1>Ed Hardy Auctions</h1> 
     </div> 
    </div> 
</div> 
+0

実際のページでは、ページの中央にリンクが多くなるため、幅を削除できません。私はあなたが示唆しているようにしようとします。ありがとう –

+0

ああ、位置に変更:相対移動layer3はページのあまりにも遠くに移動します。それを防ぐ方法はありますか? –

4

マンモスジョブですが、可能です。
トップレイヤー/ divでクリックイベントをキャプチャし、カーソルのx-y位置を見つける必要があります。
次に、最上位レイヤーの下にあるレイヤー/ div内のすべてのリンクを見つけて、画面上の位置が現在のマウス位置の周りにあるかどうかを確認します。
次に、一致したリンクのクリックをトリガーできます。
私はjQueryを使用しています(もしあなたがまだいないのであれば)。そして、問題に遭遇したらjQueryタグで再投稿してください。

+1

マンモスじゃないと思います。 jQueryのoffset()、width()、およびheight()を使用しますか? – Nosredna

+0

いいえ、それはまったく大きな仕事ではなく、これは正しい、唯一のアプローチです。 – Owen

0

私は、右側のリンクがクリックする必要のあるリンクであり、他のレイヤにリンクがないと仮定しています。もしそうなら、divのz-indexの順番を変えることで問題を解決することができます。

レイヤー1とレイヤー3には絶対的な位置がありますので、レイヤー2に位置スタイル(絶対または相対)を追加すると、そのdivを前面にプルできるようになります。また、右レイヤーのdivを上層レイヤーLayer3。

私はCSSに以下を追加しました:に私はそれがあるだけの方法現在のページ設定を離れるが、(リンク付きrightlayerを含む)すべての要素を引っ張る見ることができるものから

#Layer2 {  
    position: relative; 
    z-index: 1; 
} 

正面にあるので、その中のすべてのリンクをクリックすることができます。

デバッグの目的で、さまざまなレイヤーのZ-インデックスの順序を知るために、すべてのレイヤーに背景色を追加することをお勧めします。背景色を使用すると、リンク上に落ちていたレイヤーを見つけ出すことは非常に簡単でしたが、新しいz-indexオーダーがリンクを利用できるようにすることも確認できました。

希望すると便利です。

0

私はFirefoxにこの非常にバグがあったと言って、数年前にFirefox Bugzillaにバグを提出しました。

Mozillaのエンジニアは、これは実際にはバグではなく、HTML/CSS仕様のとおり正しい動作であると言われました。 残念ながら、私は約6年前のように元のバグを参照することができません。

私がバグを提出したのは、IEを使用しているときに上部のdivをクリックすることができたからです(私は考えていますが6)。

いつものように、帽子IEは間違った実装をしていて、Firefoxは仕様通りに動作していました。

divがトランスペアレントであるという理由だけで、そのセグメントをクリックできるはずはありません。

JavaScriptやCSSでこれをどのように回避できるかわかりません。私は一歩前進し、あなたが達成しようとしていることと達成しようとしていることについて再考しています。 ( - :.Layer3から100%の幅だけを削除、すなわち絶対位置のデフォルト)

グレッグ

0

あなたは単に自動車へのdivの幅を設定することはできません。

このように、divはリンクを不必要にオーバーラップさせるのではなく、必要なだけの幅になります。

28

私はこれを数時間苦労していたと私は解決策を見つけたと思うので、これを更新します。 Jqueryを使用していますが、CSSのプロパティを参照してください:

pointer-events:none; 

...まさに私が望むものでした。

+0

私はこれを幅広い用途に使用しないかもしれませんが、私が取り組んでいるChrome拡張機能では完全に機能します(クロムが完全にサポートしているため)。ありがとうございます。 –

+0

注意:これは、(ホバー効果のような)他の動作も壊します。 –

+1

は、IEまたはOperaの現代版でも動作しません – Andre