html - 图片上的文字，不影响图片上的其他文字

Question

我有一张图片，上面有 3 个字，但我无法在上面找到第 3 个字，因为它不会出现在我想要的 position 位置。这是有文字的图片。

#clubname {
    position: absolute;
    margin-left: 26%;
    color: #FFF;
	line-height: 0px;
    font-family: 'Knul-Bold';
}
#pacoins {
    position: relative;
    line-height: 84px;
    margin-left: 13%;
	max-width:5%;
	max-height:5%;
    color: #FFF;
    font-family: 'Knul-Bold';
    font-size: 17px;
}
#myclub {
    position: relative;
    margin-left: 30%;
    line-height: 0px;
    color: #FFF;
    font-family: 'Knul-Bold';
    font-size: 17px;
    color: black;
}

<img src="http://packsimulator.nl/img/PAClubCover.png" style="position:absolute;">
<a href="#profile"><p id="clubname">Julan FC</p></a>
<a href="#pacoins"><p id="pacoins">97.000</p></a>
<a href="#club"><p id="myclub">My Club</p></a>

如您所见，“我的俱乐部”不在蓝色图标之后。它应该在哪里。

Answer 1

用容器包装这些/包装 div 然后使用 position:relative/absolute

.wrap {
  position: relative;
  width:400px /* width of image */
}
img {
  position: absolute
}
p {
  position: absolute;
  color: #FFF;
  line-height: 0;
  font-family: 'Knul-Bold';
  z-index: 1;
  font-size: 17px
}
#clubname {
  left: 40%;
}
#pacoins{
  left: 25%;
  top:22px;
}
#myclub {
  left: 55%;
  top:22px;  
}

<div class="wrap">
  <img src="http://packsimulator.nl/img/PAClubCover.png" />
  <a href="#profile">
    <p id="clubname">Julan FC</p>
  </a>
  <a href="#pacoins">
    <p id="pacoins">97.000</p>
  </a>
  <a href="#club">
    <p id="myclub">My Club</p>
  </a>
</div>