如何在CSS中使用绝对布局定位下面的图像？

Question

我正在努力使用类似图像按钮的个人资料将文本放在图像下方。如何确保我的文本位于图像下方并与图像重叠？如何将图标放置在图像的中心？

<div class="profile-img-container">

 <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" 

    class="img-thumbnail img-circle img-responsive" />

 <i class="fa fa-upload fa-5x"></i>

 </div>

<input id='uploadfile' type ='file'>

<p>this text is actually hidden but it should be visible and appear right after the image.</p>

请查看我的代码： http: //jsfiddle.net/aLsxcejn/

Answer 1

您在规则中添加不必要的内容position: absolute，有一个选项：$('.profile-img-container').click(function() {&nbsp; $('#uploadfile').click();});#uploadfile {&nbsp; display: none;}.profile-img-container {&nbsp; position: relative;&nbsp; width: 20%;}.profile-img-container:hover img {&nbsp; opacity: 0.5;&nbsp; z-index: 501;}.profile-img-container:hover img+i {&nbsp; display: block;&nbsp; z-index: 500;}.profile-img-container i {&nbsp; display: none;&nbsp; position: absolute;&nbsp; left: 50%;&nbsp; top: 50%;&nbsp; transform: translate(-50%, -50%);&nbsp; z-index: 1000;}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><div class="profile-img-container">&nbsp; <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />&nbsp; <i class="fa fa-upload fa-5x"></i></div><input id='uploadfile' type='file'><p>this text is actually hidden but it should be visible and appear right after the image.</p>

Answer 2

尝试将以下内容添加到您的 p 标签中。p{&nbsp; position : absolute;;&nbsp; top : 180px;&nbsp; z-index : -1;}注意：&nbsp;文本位于图像下方，您可以在此处查看示例

Answer 3

尝试将以下代码附加到您的 CSS 中：.profile-img-container {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width:20%;&nbsp; &nbsp; left: 520px;&nbsp; &nbsp; top: 0px;}看看这个代码但是如果你想在文本下显示图像..尝试添加：.profile-img-container {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width:20%;&nbsp; &nbsp; left: 0px;&nbsp; &nbsp; top: 0px;&nbsp; &nbsp; z-index: -1;}