2013-01-22 2 views
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 그것은 밀어 이미지입니다 : 여기

는 그것을위한 작업 코드 서로의 위에있는 대신에 옆으로.

이유는 무엇입니까?

감사

답변

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/

편집

대표자가 3 설정을 덮어했다. 위의 내용을 사용하여 pinterest를 추가 div에 넣고 필요한 곳에 배치합니다. 귀하의 사이트에있는 불 덩어리에서 일했습니다.

+0

나는 그것을 내 사이트에 넣었습니다 ... 똑같은 일을하는 것처럼 보입니다. : – KDD

+0

편집 된 답변 pinterests 주위에 덮어 쓰기 – Taraes

+0

인라인 스타일 및 CSS 파일에 어떤 시점에서 얻을 수 있습니다. 클리너, "올바른"및 다시 그런 식으로. – Taraes

관련 문제