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），使用类会简化这一过程。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将文本div放在主框div中，而不是将其放在外面。没有必要使用带有绝对定位div的浮点数。要调整左，右偏移，也要添加左右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/

Answer 3

您没有将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;
}