Question

我想在我的重叠图像下显示文字。我有两个并排的图像，这些图像将被投票，因此“VS”图像与中间的其他两个图像重叠，完美地工作。但是，当我尝试在要投票的每个图像下显示文本时，它似乎显示在图像后面的顶部，而不是正常情况下的下方。

这是它目前做的代码：

html:

 <div align="center">
 <div id="vs">
 <a href=""><img id="png1" src="/puppies/8.jpg" /></a><p
 class="left">username<br>Description<br>Puppies name</p>
 <img id="png2" src="/images/vs.png" /> 
 <a href=""><img id="png3"  src="/puppies/8.jpg" /></a><p
  class="right">username<br>Description<br>puppies name</p>
 </div>
 </div>

 css:

#png1 {
position:absolute;
top:30px;
left:0;
z-index:0;
}

#png2 {
position:absolute;
top:100px;
left:260px;
z-index:1;
}
#png3 {
position:absolute;
top:30px;
left:315px;
z-index:0;
}
#vs{
position: relative;
width: 620px;
height: 310px;
}
p.left{
 position:absolute;
top:315px;
left:0px;
z-index:4;
text-align:left;
}
p.right{
 position:absolute;
top:315px;
left:315px;
z-index:4;
text-align:left;

}

Answer 1

我想我明白了你要做的事情。您的设置并不是最好的。我重写了HTML / CSS，这就是你想要的：

http://codepen.io/anon/pen/pJMeGr

a{
  display: inline-block;
  vertical-align: top;
  position: relatve;
  z-index: 9;
}
img{
  display: inline-block;
  border: 1px solid #333;
}
.left{
  margin-right: -15px;
}
.right{
  margin-left: -10px;
}
#vs{
  text-align: center;
}
.vs{
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 10;
  border: 1px solid #000;
  margin-top: 8px;
}

<div>
  <div id="vs">
    <a class="left" href="#"><img src="http://placehold.it/120x120" />
      <br>puppies name
      <br>username
      <br>Description
    </a>

    <img class="vs" src="http://placehold.it/100x100" />

    <a class="right" href="#"><img src="http://placehold.it/120x120" />
      <br>puppies name
      <br>username
      <br>Description
    </a>
  </div>
</div>

无法在重叠图像下方对齐文本

1 个答案: