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>

Answer 2

您必须使用float:left;。

将您的CSS更改为此

#pacoins {
    position: relative;
    line-height: 48px;
    margin-left: 20%;
    max-width: 5%;
    max-height: 5%;
    color: #FFF;
    font-family: 'Knul-Bold';
    font-size: 17px;
    float:left;
}
#myclub {
    position: relative;
    margin-left: 42%;
    line-height: 84px;
    font-family: 'Knul-Bold';
    font-size: 17px;
    color: black;
}

在这里工作JSFiddle https://jsfiddle.net/dotcgtuc/1/

希望这有帮助。

Answer 3

您需要使用position: absolute;进行定位。例如

#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: absolute;
    left: 40%;
    top: 45px;
    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 4

好的，你在这里发生了一些不太推荐的事情，但是重新修改你的html＆amp; css我相信我已经产生了你正在寻找的结果。

首先，您将段落标记<p>嵌入到锚标记<a>中 - 这只是HTML5兼容，因为p是块元素，而锚是内联的。我建议你如何使用span标签。

其次，您的CSS使用百分比来放置这些元素 - 因此，一旦浏览器调整大小，您的元素将全部被抛弃。将这些信息放在一起，我相信我们可以实现您正在寻找的结果：

<强> CSS

#clubname {
    position: absolute;
    top: 15px;
    left: 255px;
    color: #FFF;

    font-family: 'Knul-Bold';
}
#pacoins {
    position: relative;
    top: 30px;
    left: 100px;
    max-width:5%;
    max-height:5%;
    color: #FFF;
    font-family: 'Knul-Bold';
    font-size: 17px;
}
#myclub {
    position: relative;
    left: 200px;
    top: 32px;
    color: #FFF;
    font-family: 'Knul-Bold';
    font-size: 17px;
    color: white;
}

<强> HTML

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

Fiddle

文字覆盖图像，不影响图像上的其他文字

4 个答案: