如何在css3中的圖像上浮動文本

Question

如何在圖像上對齊文本？我嘗試用絕對位置，但是這是因爲圖像的圖像下都絕對位置的.text必須在圖像下的框中，這樣的形象http://s8.postimage.org/tsrcam791/image.png或文本必須浮動圖像

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; 
} 

上

<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-index屬性。給圖像比文本div更低的Z-index。這應該爲你排序。