Question

我正在尝试放置一张图片＆amp;将鼠标悬停在我桌子上方。我试图使用绝对/相对/固定/静态等css位置。但不知何故，它会出现在桌面上或将表格推到页面底部。

如何将图像放在桌子上方？

CSS：

.searchbutton {
position: relative;
top: 10%;
left: 40%;
display: block;
width: 450px;
height: 450px;
background-image: url('<?php echo $searchpic;?>');
background-repeat:no-repeat;
}

.searchbutton:hover {
position: relative;
top: 10%;
left: 20%;
display: block;
width: 450px;
height: 450px;
background-image: url('<?php echo $searchhoverpic;?>');
background-repeat:no-repeat;
}

PHP：

<?php

include 'database_conn.php';    

$sql = "SELECT tablename.ID, tablename.Title, tablename.Year, tablename2.catDesc,tablename.catID
            FROM tablename
            LEFT JOIN tablename2 ON tablename.catID=tablename2.catID"; 

$queryresult = mysqli_query($conn, $sql)
or die (mysqli_error($conn));       


    echo '<table cellpadding="0" cellspacing="0" class="db-table" table align="center">';
    echo"<tr><th>Title</th><th>Year</th><th>Category</th>  </tr>"; 

while($row = mysqli_fetch_assoc($queryresult)) {
    $iCDID = $row['ID'];
    $CDTitle = $row['Title'];
            $CDYear = $row['Year'];
            $CDCatID = $row['catID'];

            echo "<tr><td>"; 
            echo "<div> <a href = \"editCDForm.php?itemCode=$iCDID\">$CDTitle</a> </div>\n";
            echo "</td><td>";   
            echo $row['Year'];
            echo "</TD></tr>"; 
}

    echo "</table>"; 

mysqli_free_result($queryresult); 
mysqli_close($conn);
?>

Answer 1

您可能希望将表放在div容器中并添加相对于它的位置。对于图像，您需要一个位置：绝对让它覆盖桌子。

HTML：

<div class="outer">
  <div class="image"></div>
  <table>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </table>

CSS：

.outer {
  position:relative;
}
.image {
  position:absolute;
  top:0;
  left:0;
  width:100px;
  opacity:0.4;
  height:100px;
  background:red;
}

https://jsfiddle.net/cL12xgx6/

在表格之前定位悬停图像

1 个答案: