把文字放在图像上

Question

我正在尝试创建一个显示表格系列的页面。当我使用foreach显示表中的所有结果时，它可以正常工作。但是，当我尝试在每个图像上放置文本时，问题就出现了。我制作了图片position: relative;和文字position: absolute;，但所有文字都成为第一张图片。

fidde link

<div class="container maincontainer">
<div class="container ser text-center">
<ul>
<?php
$i=0;
$stmt = $con->prepare("SELECT * FROM series ORDER BY added_date DESC");
$stmt->execute();
$rows = $stmt->fetchAll();
foreach($rows as $row){ 
echo '
<div class="imgdiv">
<a href="series.php?id=' . $row['seriesID'] .'">
<img class="images" src="'. $dirnam .'cp/uploads/posters/'.$row['poster'].'"></a><div style="position: absolute;z-index:1100;">calc</div>'; ?>
<?php
} ?>

     的CSS：

.images{
    float: left;
    height: 300px;
    width: 16.66666%;
    padding:1px;
   border:1px solid #021a40;
   background-color:#ff0;

}
.series{
    margin: 0px auto;
    padding:0;
    width: 100%;
    overflow: hidden;


}


.imgdiv:hover img {
  opacity: 0.7;
}
.srchbox{
    margin-left: 50px;
    float:right;
    height: 30px;
    padding-top: 0px;
}
.ser{
    margin: 0px auto;
    padding:0;
    width: 90%;
    margin-top: 36px;
}

.maincontainer{
    width: 100%;
    background-color: rgba(34, 34, 34, 0.65);
}

Answer 1

这些元素都没有position: relative，至少在您发布的代码中没有。所以没有＆＃34;位置锚＆＃34;对于绝对定位的文本元素。

评论后编辑并发布了FIDDLE：

您应用于图像的大多数设置（浮动，大小，相对位置等）应该应用于imgdiv类。图像本身应该只有100％的宽度和自动高度。

看看这个包含解决方案的小提琴，并告诉我你是否理解不了什么：

https://jsfiddle.net/bn70byh8/1/

注意：如果您绝对想要拉伸图像高度以完全覆盖其对应的对象，则可以在图像上使用height: 100%。但是，这会改变宽高比，并可能使图像失真。

Answer 2

.images需要position: relative，这样才能让你的绝对定位div与文字重叠。这是一个很好的参考！

https://css-tricks.com/absolute-positioning-inside-relative-positioning/