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

你需要这样的东西：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

父容器应该有position: relative，而子（重叠元素）应该有position: absolute。像这样：

.img-container {
    positon: relative;
}

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

在img底部显示div

2 个答案: