Как расположить изображение под абсолютным макетом в 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

Попробуйте добавить этот код в 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;
}

Answer 3

Попробуйте добавить следующее к вашему тегу p.

p{
  position : absolute;;
  top : 180px;
  z-index : -1;
}

ПРИМЕЧАНИЕ: Текст находится под изображением, которое вы можете использовать здесь Пример