CSS在多個圖像上放置多個文本

Question

我無法在多個圖像前放置多個文本。我可以實現這一目標的方式是使用絕對和相對定位，1張圖像上方只有1個文字。但是，當在多個ID使用它不起作用。請給我一個方法。謝謝

#box1{ 
float:left; 
position: relative; 
z-index: 10; 
width: 100px; 
} 

#boxtext1{ 
float:left; 
width:100px; 
position: absolute; 
z-index: 51; 
    } 
    #box2{ 
float:left; 
position: relative; 
z-index: 11; 
width: 100px; 
} 

#boxtext2{ 
float:left; 
width:100px; 
position: relative; 
z-index: 50; 
    } 

http://jsfiddle.net/k9b0vgeg/3/

Answer 1

如果有沒有一些其他的理由要使用的ID（即JavaScript的），使用類可以簡化這個許多。

.box { 
 
    float:left; 
 
    position:relative; 
 
    width:100px; 
 
} 
 
.box-text { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
}

<div class="box"> 
 
    <img src="image.jpg" width="100"/> 
 
    <div class="box-text">Some Text 1</div> 
 
</div> 
 

 
<div class="box"> 
 
    <img src="image.jpg" width="100"/> 
 
    <div class="box-text">Some Text 2</div> 
 
</div>

Answer 2

你沒有把你的HTML代碼中的問題，假設你的HTML是什麼在你的jsfiddle所示：

分別把你#boxtext1/2/3等裏面的#box1/2/3等。並相應地設置框文本的樣式。

DEMO：JSFIDDLE

HTML：

<div id="box1"> 
    <img src="image.jpg" width="100px"/> 
    <div id="boxtext1"> 
     Some text1 
    </div> 
</div> 



<div id="box2"> 
    <img src="image.jpg" width="100px"/> 
    <div id="boxtext2"> 
     Some text2 
    </div> 
</div> 

CSS：

#box1{ 
    float:left; 
    position: relative; 
    z-index: 10; 
    width: 100px; 
} 

#boxtext1{ 
    float:left; 
    width:100px; 
    position: absolute; 
    margin-top:-100px; 
    margin-left:5px; 
} 
#box2{ 
    float:left; 
    position: relative; 
    z-index: 10; 
    width: 100px; 
} 

#boxtext2{ 
    float:left; 
    width:100px; 
    position: absolute; 
    margin-top:-100px; 
    margin-left:5px; 
} 

Answer 3

將主箱格，而不是外界把它裏面的文字股利。沒有必要使用絕對定位div的float。要調整左側和右側的偏移量，請添加左側和右側的CSS規則。

HTML：

<div id="box1"> 
    <img src="image.jpg" width="100px" /> 
    <div id="boxtext1">Some text1</div> 
</div> 
<div id="box2"> 
    <img src="image.jpg" width="100px" /> 
    <div id="boxtext2">Some text2</div> 
</div> 

CSS：

#box1 { 
    float:left; 
    position: relative; 
    z-index: 10; 
    width: 100px; 
} 
#boxtext1 { 
    width:100px; 
    position: absolute; 
    z-index: 51; 
    bottom:10px; 
} 
#box2 { 
    float:left; 
    position: relative; 
    z-index: 11; 
    width: 100px; 
} 
#boxtext2 { 
    width:100px; 
    position: absolute; 
    z-index: 50; 
    bottom:10px; //for placement. 
} 

演示：http://jsfiddle.net/lotusgodkk/k9b0vgeg/6/