如何在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() {

  $('#uploadfile').click();

});

#uploadfile {

  display: none;

}

.profile-img-container {

  position: relative;

  width: 20%;

}

.profile-img-container:hover img {

  opacity: 0.5;

  z-index: 501;

}

.profile-img-container:hover img+i {

  display: block;

  z-index: 500;

}

.profile-img-container i {

  display: none;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  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">

  <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>

Answer 2

尝试将以下内容添加到您的 p 标签中。

p{

  position : absolute;;

  top : 180px;

  z-index : -1;

}

注意： 文本位于图像下方，您可以在此处查看示例

Answer 3

尝试将以下代码附加到您的 CSS 中：

.profile-img-container {

    position: absolute;

    width:20%;

    left: 520px;

    top: 0px;

}

看看这个代码

但是如果你想在文本下显示图像..尝试添加：

.profile-img-container {

    position: absolute;

    width:20%;

    left: 0px;

    top: 0px;

    z-index: -1;

}