Question

我正在尝试将Front Awesome中的图标显示在我页面上的图像顶部。我尝试过几种方法，但似乎无法使其发挥作用。这就是我所拥有的：

HTML：

<div class="container clearfix">
  <div class="UserProfilePage"> 
    <a href="/fans/{{$fan->url_tag}}"><img src="{{$fan->image}}" width="195" height="195" style="z-index: 1;"></a>

    <a href="#" class="upload-photo"><i class="fa fa-camera fa-2x" style="z-index: 2; position:absolute; margin:0 auto"></i></a>

//...other user data here

</div>
</div>

CSS：

（container / clearfix来自twitter-bootstrap 2.3.2）

.UserProfilePage {
    text-align: center;
    padding: 130px 0 0;
}

.UserProfilePage img {
    border-radius: 130px;
    -moz-border-radius: 130px;
    -ms-border-radius: 130px;
    -webkit-border-radius: 130px;
    -khtml-border-radius: 130px;
}

这个想法是让物体在某处悬停在它上方的图像上方。但是，在尝试这样做时，我遇到的问题只会出现在图像之外等等......任何想法？我尝试制作顶级图像＆＃34;亲戚＆＃34;但后来它从我想要的地方移开了。

Answer 1

我会尝试换行：

<br/>

<a href="/fans/{{$fan->url_tag}}"><img src="{{$fan->image}}" width="195" height="195" style="z-index: 1;"><br/></a>

Answer 2

如果我正确理解您的问题，您希望自己的图标显示在个人资料图片的顶部。

这是一个包含可以做到这一点的小提琴：

没有包装：http://jsfiddle.net/2Ym97/5/
使用包装器：http://jsfiddle.net/2Ym97/7/

我清理了您的代码，以便于阅读和理解。我还添加了一些东西。

我的代码中需要注意的主要事项是：

图标upload-photo不再具有z-index和margin规则
个人资料图片不再有z-index，width和height会移至CSS。

upload-photo现在有这些规则

.upload-photo {
    position: absolute; /* This is important */
    left: 81px; /* This could be anything */
    top: 83px; /* This could be anything */
}

为了方便起见，我建议使用定位相对的包装来包装个人资料图片和图标。

如何将图像放在另一个图像上方，使底面图像相对

2 个答案: