0

2つの画像を重ねて表示しようとしていますが、上にある2番目の画像もリンクです。

そのための作業コードは次のとおりです。

<div style="position: relative; left: 0; top: 0;">
  <img src="http://www.handicappedpets.com/images/newproducts/fabricharnessweb.jpg" style="position: relative; top: 0; left: 0;"/>
  <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.handicappedpets.com%2Findex.php%2Fwalkin-wheels-rear-harness.html&media=http%3A%2F%2Fwww.handicappedpets.com%2Fimages%2Fnewproducts%2Ffabricharnessweb.jpg&description=The%20Walkin'%20Wheels%20Rear%20Harness%20is%20used%20to%20support%20your%20dogs%20hind%20quarters.%20Starting%20at%20%2439.99" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" style="position: absolute; top: 425px; left: 20px;" /></a>
</div>

（または、ここをクリックしてください）http://jsfiddle.net/danield770/nFvUu/3/

しかし、このコードを実際のWebサイトにスローすると、.. http://www.handicappedpets.com/index.php?option=com_content&view=article&id=819 画像が重なり合うのではなく、横に押し出されます。

なぜそれがこれを行うのかについてのアイデアはありますか？

ありがとう

4

1 に答える 1

1

これを試してみてください：

    <div style="position: relative; left: 0; top: 0; z-index:1;">
  <img style="position: relative; top: 0; left: 0; z-index:2;" title="wizard new var 2" alt="wizard new var 2" src="http://www.handicappedpets.com/images/newproducts/fabricharnessweb.jpg">
<div style="position: absolute; top: 425px; left: 20px;  z-index:3;">
  <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.handicappedpets.com%2Findex.php%2Fwalkin-wheels-rear-harness.html&amp;media=http%3A%2F%2Fwww.handicappedpets.com%2Fimages%2Fnewproducts%2Ffabricharnessweb.jpg&amp;description=The%20Walkin%27%20Wheels%20Rear%20Harness%20is%20used%20to%20support%20your%20dogs%20hind%20quarters.%20Starting%20at%20%2439.99" data-pin-aha="button_pinit" data-pin-config="beside" class="PIN_1358884071645_pin_it_button PIN_1358884071645_pin_it_beside"><span class="PIN_1358884071645_pin_it_button_count" id="PIN_1358884071645_pin_count_1"><i></i>1</span></a>
</div>
</div>

ほとんどの場合、zインデックスが必要です。ここでは正常に機能しているようです：http：//jsfiddle.net/nFvUu/4/

編集

Pinterestは3番目の設定を上書きしていました。上記を使用して、ピンタレストを追加のdivでラップし、必要な場所に配置します。あなたのサイトのfirebugで働いた。

于 2013-01-22T19:31:46.790 に答える