html - 图像右上角和左上角的 float 链接

Question

我在一个 div 中有一个图像。我想要两个链接漂浮在图像上，一个在图像的左上角，另一个在图像的右上角。我这样做了:

<div class="container">
  <div style="float:left"><a href="#">like</a></div>
  <div style="float:right"><a href="#">share</a></div>
  <img src="images/activity-image.jpg" />
</div>

float div 将图像向下推。但是，我希望它们出现在图像上。它应该看起来好像喜欢和共享链接位于图像的左上角和右上角，而不是图像上方。希望我的解释清楚。

请帮忙。谢谢。

Answer 1

在 relative 定位元素中使用 absolute 位置并使用 top, bottom, right 和 left 属性来定位文本。

试试这个:

.top{
    top: 0;
}
.left{
    left: 0;
}
.right{
    right: 0;
}
.img{
    position: relative;
    width: 200px;
    height: 200px;
    background: url("https://www.google.com/images/srpr/logo11w.png") no-repeat;
}
.img span{
    position: absolute;
    color: #000;
}

<div class="img">
    <span class="top left">text</span>
    <span class="top right">text</span>
</div>

JSFiddle Demo