0

我正在尝试将 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/

但如果我把这段代码扔到一个真实的网站.. 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 正在覆盖第三个设置。使用上述方法，将 pinterest 包装在一个额外的 div 中并将其放置在您需要的地方。在您的网站上使用萤火虫。

于 2013-01-22T19:31:46.790 回答