дисплей DIV в нижней части над IMG

Question

HTML:

<div class="items-display"> 
<div class="item-container"> 

    <?php foreach ($userItems_get as $item => $value) { 

      if ($value['prefab'] == 'wearable') { 

     // echo $value['name'] . "</br>"; ?> 

     <img src="<?php echo $value['image_inventory']; ?>.png" width="90" height="60"> 

    <?php if (!isset($value['item_rarity'])) { 
       $rarity = "common"; 
      } else { 
       $rarity = $value['item_rarity']; 
      } 
      ?> 

      <p> <?php echo $rarity; ?> </p> 

    <?php } 
    } 
    ?> 
</div> 
</div> 

CSS:

.item-display { 

} 

.item-container img { 
    height: 60px; 
    width: 95px; 
    background-color: grey; 
    color: white; 
    border-radius: 5px; 
    border: 2px solid #252525; 
    position: relative; 
} 

.item-container p { 
    height: 13px; 
    width: 95px; 
    background-color: #252525; 
    color: white; 
    text-align: center; 
    padding-bottom: 4px; 
    bottom: 0; 
    position: absolute; 
} 

выход: http://puu.sh/kYdjv/95aaccfc51.jpg

хотите, чтобы выглядеть следующим образом: http://i.stack.imgur.com/Ld7hb.jpg

Я хочу он должен появляться над изображением внизу, как на изображении. но он продолжает появляться вне класса.

Answer 1

Вам нужно что-то вроде этого:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.item-container { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 
.item-container img { 
 
    display: block; 
 
    height: 60px; 
 
    width: 95px; 
 
    background-color: grey; 
 
    color: white; 
 
    border-radius: 5px; 
 
    border: 2px solid #252525; 
 
} 
 
.item-container p { 
 
    width: 95px; 
 
    background-color: red; 
 
    color: white; 
 
    text-align: center; 
 
    padding-bottom: 4px; 
 
    bottom: 0; 
 
    position: absolute; 
 
}

<div class="item-container"> 
 
    <img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt=""> 
 
    <p>Lorem ipsum</p> 
 
</div>

Answer 2

Родительский контейнер должен иметь position: relative, а ребенок (перекрывающий элемент) должен иметь position: absolute. Как это:

.img-container { 
    positon: relative; 
} 

.overlapping-element { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}