0

私はFacebookアプリを作成しており、iframe内のFacebookデザインフローを維持するために、Facebook機能の一部を「コピー」しています。私が問題を抱えているのは、親の背景画像を使用した矢印の付いたホバーカードのポップアップダイアログです。

以下のリンクで、私がやろうとしていることがわかります。 http://grab.by/k9Na

その写真では、同じ位置プロパティを持つ2つの絶対divを使用しています。最初のレイヤーには、白い矢印が反転した透明な背景画像があります（背景と同じ色）。2番目のレイヤーはカバー写真に設定され、最初のレイヤーと重なって矢印のように見えます。

カバー写真の正しい位置を2番目の矢印レイヤーに配置するのに問題があります。しばらくこれを検索してみましたが、空っぽになりました。Facebookのコードも調べて、さらに混乱しました。

4

1 に答える 1

0

私はそれを考え出した。これは最善または最も効率的なソリューションではないかもしれませんが、機能します。

http://grab.by/kapw

上の写真では、3 つの青いボックス (div) をマッピングしたことがわかります。これらのボックスは、ダイアログ ポップアップと同じ幅で、高さが 15px に固定された絶対コンテナー内に配置されます。

3 つのボックスは、コンテナーの上に置かれているフェイス ボックスに基づいて配置されます。この例では、左から 2 番目のボックスがホバリングされています。矢印がそのボックスに向かっていることに注意してください。

' left ' div 幅をフェイス ボックスの左位置に設定します。

' bg ' div の左位置をフェイス ボックスの左位置に設定します。

' right ' div の左位置を left と bg div の幅の合計に設定します。

左と背景の幅の合計を差し引いた親の幅に ' right ' div 幅を設定します。

divコンテナーの zIndex を高い数値に設定します。

bg div 内部 html内に透明な逆矢印を配置します

 <div class="container">
  <div class="left"></div>
  <div class="bg">
   <img src="inversedArrow.png">
  </div>
  <div class="right"></div>
 </div>

ビオラ！

于 2013-02-24T20:36:13.287 に答える