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>

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

请帮忙。感谢。

Answer 1

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

试试这个：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

<强> JSFiddle Demo

Answer 2

看看这个，但调整h2元素的CSS定位，以满足您的需求：css-tricks.com/text-blocks-over-image

Answer 3

＆＃13;

.container {
    position: relative;
    width: 300px;
}
img {
    width: 300px;
    height: 300px;
}
.top_right {
    position: absolute;
    right: 0px;
    top: 8px;
}
.top_left {
    position: absolute;
    top: 8px;
    left: 8px;
}

＆＃13;

<div class="container">
    <div class = "top_right"><a href="#">like</a></div>
    <div class= "top_left"><a href="#">share</a></div>
    <img src="http://thevisualcommunicationguy.com/wp-content/uploads/2013/11/Starbucks-Logo-051711.gif" />
</div>

＆＃13;

PS - 这与您的代码有关。显然还有更好的方法。

JS Bin demo

Answer 4

您是否设置了CSS定位？设置图像 position: fixed 可以在浮动div时将图像保持在原位。

浮动链接在图像的右上角和左上角

4 个答案: