CSS位置:绝对和Z索引无法获取文本分割以覆盖从数据库回显的图像？
CSS位置:绝对和Z索引无法获取文本分割以覆盖从数据库回显的图像？
提问于 2018-09-30 06:36:33
在phpmyadmin数据库中，我尝试从images表中回显username和img_name行。我得到的问题是：
带有字符串"name“的div(来自$row['username'])不会与复选标记图像(来自$row['img_name'])重叠，而是位于图像的右侧。名为#indeximg的复选标记图像有一个position: relative而不是absolute，因为如果我将其设置为absolute，图像将堆叠在一起，这不是我想要的。我希望名为span#names的“#indeximg”div位于每个相应的CSS之上。
下面是我的全部代码：
<style>
div.topicscats {
border: 1px solid black;
height: 100px;
width: 360px;
}
#indeximg {
float: left;
position: relative;
width: 100px;
height: 100px;
border: 2px solid red;
z-index: 2;
}
span#names {
position: absolute;
color: blue;
border: 2px solid blue;
z-index: 3;
}
</style>
<div class="topicscats">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "photos";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$membsql = "SELECT * FROM images";
$result = mysqli_query($conn, $membsql);
while ($row = mysqli_fetch_assoc($result)) {
echo "<img style='' id='indeximg' src='images/".$row['img_name']."'>
<div class='names'><span id='names'>".$row['username']."</span></div>";
}
?>
</div>
回答 1
Stack Overflow用户
发布于 2018-10-01 17:36:00
您需要创建一个包装器div，它是relative，然后您可以将图像和名称absolute定位到此包装器的左上角。
<style>
div.topicscats {
border: 1px solid black;
height: 100px;
width: 360px;
}
div.wrap{
float: left;
position: relative;
width: 100px;
height: 100px;
border: 2px solid red;
z-index: 2;
}
#indeximg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
span#names {
position: absolute;
color: blue;
border: 2px solid blue;
z-index: 3;
left: 0;
top: 0;
}
</style>
<div class="topicscats">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "photos";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$membsql = "SELECT * FROM images";
$result = mysqli_query($conn, $membsql);
while ($row = mysqli_fetch_assoc($result)) {
echo "<div class="wrap"><img style='' id='indeximg' src='images/".$row['img_name']."'>
<div class='names'><span id='names'>".$row['username']."</span></div></div>";
}
?>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52573104
复制相关文章
相似问题