css3의 이미지에 텍스트를 플로팅하는 방법

Question

이미지 위에 텍스트를 정렬하는 방법은 무엇입니까? I는 절대 위치를 사용하여 시도했지만 이미지

CSS

.image_stack img { /* css style for photo stack */ 
border: none; 
text-decoration: none; 
position: absolute; 
margin-left:0px; 
width: 170px; 
height: 160px; 

} 
.image_stack { /* css style for photo stack */ 
width: 200px; 
position: relative; 
padding-left:20px; 
margin-bottom:40px; 
float:left; 

} 
.image_stack img { /* css style for photo stack */ 
position: absolute; 
border: 4px solid #FFF; 
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); 
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); 
z-index: 9999; 
/* Firefox */ 
-moz-transition: all 0.2s ease; 
/* WebKit */ 
-webkit-transition: all 0.2s ease; 
/* Opera */ 
-o-transition: all 0.2s ease; 
/* Standard */ 
transition: all 0.2s ease; 
} 
.image_stack #photo1 { /* position of last photo in the stack */ 
top: 8px; 
left: 108px; 
} 
.image_stack #photo2 {/* position of middle photo in the stack */ 
top: 6px; 
left: 104px; 
} 
.image_stack #photo3 {/* position of first photo at the top in the stack */ 
top: 4px; 
left: 100px; 
right: 100px; 
} 
.image_stack .rotate1 {/* rotate last image 15 degrees to the right */ 
-webkit-transform: rotate(15deg); /* safari and chrome */ 
-moz-transform: rotate(15deg);/*firefox browsers */ 
transform: rotate(15deg);/*other */ 
-ms-transform:rotate(15deg); /* Internet Explorer 9 */ 
-o-transform:rotate(15deg); /* Opera */ 
} 
.image_stack .rotate2 {/* css not used*/ 
-webkit-transform: rotate(0deg); /* safari and chrome */ 
-moz-transform: rotate(0deg);/*firefox browsers */ 
transform: rotate(0deg);/*other */ 
-ms-transform:rotate(0deg); /* Internet Explorer 9 */ 
-o-transform:rotate(0deg); /* Opera */ 
} 
.image_stack .rotate3 {/*rotate first image 15 degrees to the left*/ 
-webkit-transform: rotate(-15deg); /* safari and chrome */ 
-moz-transform: rotate(-15deg); /*firefox browsers */ 
transform: rotate(-15deg);/*other */ 
-ms-transform:rotate(-15deg); /* Internet Explorer 9 */ 
-o-transform:rotate(-15deg); /* Opera */ 
cursor: pointer; 
} 

위에 떠 있어야 이미지 http://s8.postimage.org/tsrcam791/image.png 또는 텍스트와 마찬가지로 상자 이미지 아래에 있어야 절대 위치는 .text로 인해 이미지의 이미지 미만이고

<div class="image_stack" style="margin-left:0px;" > 
<img id="photo1" class="stackphotos" src="photos/2.jpg" > 
<img id="photo2" class="stackphotos" src="photos/3.jpg" > 
<img id="photo3" class="stackphotos" src="photos/1.jpg" > 

<div style="position:absolute;left:150px;top:130px;display:block;background:#eee;width:180px;"> text</div> 

</div> 
<div class="image_stack"style="margin-left:0px;" > 
<img id="photo1" class="stackphotos" src="photos/2.jpg" > 
<img id="photo2" class="stackphotos" src="photos/3.jpg" > 
<img id="photo3" class="stackphotos" src="photos/1.jpg" > 
</div> 
<div class="image_stack"style="margin-left:0px;" > 
<img id="photo1" class="stackphotos" src="photos/2.jpg" > 
<img id="photo2" class="stackphotos" src="photos/3.jpg" > 
<img id="photo3" class="stackphotos" src="photos/1.jpg" > 
</div> 
</div> 

Answer 1

은 또한 이미지와 텍스트 DIV의 Z- 인덱스 속성을 구현해야합니다. 이미지에 텍스트 div보다 낮은 z- 색인을 지정하십시오. 그것은 당신을 위해 그것을 정렬해야합니다.