HTML의 다른 이미지 위에 이미지를 배치하는 방법은 무엇입니까?

Question

wplayout.com 사이트를 확인하십시오. 홈페이지에는 갤러리가 있습니다. 홈 페이지 갤러리에 표시된 각 이미지 위에 "프리미엄"태그 이미지를 배치하고 싶습니다. 현재 프리미엄 이미지는 홈 페이지의 오른쪽 상단에 표시됩니다. 그것을 성취하는 방법?

지금까지 내가

---

.ribbon { 
background: url("images/premium.png") no-repeat top right; 
width: 100px; 
height: 102px; 
overflow: hidden; 
/*text-indent: -9000px;*/ 
position: absolute; 
top: -3px; 
right: -3px; 
z-index:500; 
display: block; 
} 

---

을 가지고 HTML에서 나는 사전에

<span class="ribbon"></span> 

감사를

Answer 1

위치 : relative는 리본에 적용되어야하며 컨테이너 div에는 적용되지 않아야한다고 생각합니다.

.ribbon 
{ 
    background: url("images/premium.png") no-repeat top right; 
    width: 100px; 
    height: 102px; 
    overflow: hidden; 
    /*text-indent: -9000px;*/ 
    position: relative; /*changed*/ 
    right: -204px; /*changed*/ 
    top: -230px; /*changed*/ 
    z-index:500; 
    display: block; 
} 

가이 일을 사용하여이 불을 지르고 &을 시도 넣어보십시오. 희망이 당신을 위해 작동합니다.

Answer 2

사용 CSS를

에서 z-index 선택 프리미엄 컨텐츠를 들어

는 z-index:999;를 추가하고 사용 아래 이미지에 z-index:0;

Answer 3

은 '프리미엄'이미지가 포함 된 div은과 같이, 그 위에 position: relative 세트를 가지고 있는지 확인하십시오 :

마크 업 :

<div class="my-image"> 
    <img src="whatevs.jpg"> 
    <span class="ribbon"></span> 
</div> 

CSS :

.my-image { 
    position: relative; 
} 

절대 위치 지정을 사용하는 Divs (리본)는 position: relative 인 첫 번째 부모 또는 해당 부모가없는 경우 본문에 상대적으로 배치됩니다.