Question

我试图将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 它将图像推向一边而不是彼此重叠。

为什么会这样做？

由于

Answer 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-index。似乎在这里工作正常：http://jsfiddle.net/nFvUu/4/

修改

Pinterest覆盖了第3个设置。使用上面的内容，将pinterest包裹在另一个div中并将其放置在您需要的地方。在你的网站上使用萤火虫。

分层图像但有链接

1 个答案: