0

画像の上にテキストを配置する方法は? 絶対位置を使用してみましたが、画像が絶対位置にあるため、画像の下にあります。テキストはボックス内の画像の下にある必要があります。この画像のように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>
4

1 に答える 1

1

また、画像とテキスト div に z-index プロパティを実装する必要があります。画像の z-index をテキスト div よりも低くします。それはあなたのためにそれをソートするはずです。

于 2012-07-26T16:11:46.807 に答える