分層的圖像，但與鏈接

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-索引。似乎在這裏很好的工作：http://jsfiddle.net/nFvUu/4/

編輯

Pinterest的是覆蓋3設置。使用上面的方法，將pinterest包裝在一個額外的div中，並將其放在需要的地方。在你的網站上的螢火蟲工作。