我的html页面包含bg作为IMG SRC。
我希望 TABLE 在某个位置出现在 img 上。
实际上，如何使表格显示在图像顶部？
如果我使用 z-index，我做错了什么？
注意：我在 img 结束的位置之后看到表格的其余部分。
<!DOCTYPE html>
<html dir="rtl" lang="he">
<body>
<head>
<TITLE>table on img bg</TITLE>
<script src="include/jquery-2.2.0.min.js"></script>
<meta charset="utf-8" />
<style>
html
{
}
h1
{
font-family: arial;
font-size: 350%;
color: white;
}
#container
{
}
#header
{
}
#content
{
}
#footer
{
}
.tg {border-collapse:collapse;border-spacing:0;border-color:#ebaa80;width:1918px;}
.tg td{font-family:Arial, sans-serif;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ebaa80;color:#fff;}
.tg th{font-family:Arial, sans-serif;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ebaa80;color:#ebaa80;}
.tg .tg-o24q{font-weight:bold;text-align:center}
.tg .tg-tdef{font-weight:bold}
</style>
</head>
<div id="container">
<img src="images/horizontal/bg.jpg" style="position: absolute; right: 0px; top: 0px;">
<div id="header">
<table class="tg">
<tr>
<th class="tg-o24q">Hours</th>
<th class="tg-tdef">1</th>
<th class="tg-tdef">2</th>
<th class="tg-tdef">3</th>
<th class="tg-tdef">4</th>
<th class="tg-tdef">5</th>
<th class="tg-tdef">6</th>
<th class="tg-tdef">7</th>
</tr>
<%
Response.Write "<TR>"
Response.Write "<td class=tg-tdef>" & "a" & "</TD>"
Response.Write "<td class=tg-tdef>" & "b" & "</TD>"
Response.Write "<td class=tg-tdef>" & "c" & "</TD>"
Response.Write "<td class=tg-tdef>" & "d" & "</TD>"
Response.Write "<td class=tg-tdef>" & "e" & "</TD>"
Response.Write "<td class=tg-tdef>" & "f" & "</TD>"
Response.Write "<td class=tg-tdef>" & "g" & "</TD>"
Response.Write "<td class=tg-tdef>" & "h" & "</TD>"
Response.Write "</TR>" & vbCrLf
Response.Write "</table>" & vbCrLf
%>
<div id="header">
<img src="images/horizontal/1.jpg" style="position: absolute; right: 0px; top: 0px;">
<img src="images/horizontal/2.jpg" style="position: absolute; right: 0px; top: 210px;">
<img src="images/horizontal/3.jpg" style="position: absolute; right: 0px; top: 440px;">
<img src="images/horizontal/4.jpg" style="position: absolute; right: 0px; top: 610px;">
<img src="images/horizontal/5.jpg" style="position: absolute; right: 0px; top: 1090px;">
<img src="images/horizontal/6.jpg" style="position: absolute; right: 0px; top: 1320px;">
<img src="images/horizontal/7.jpg" style="position: absolute; right: 0px; top: 1560px;">
</div>
<div id="content">
</div>
<div id="footer">
<img src="images/horizontal/8.gif" style="position: absolute; right: 50px; top: 1595px;">
<img src="images/horizontal/9.gif" style="position: absolute; right: 565px; top: 1595px;">
</div>
</div>
</body>
</html>更正
你的代码是错误的。"head"标签应该是"html"标签的第一个子标签，因此是"body"标签的同级。
解决方案 1
除了"z-index"属性之外，添加"位置：绝对"以创建重叠效果，如下所示：
img { position: absolute; left: 0px; top: 0px; z-index: -1; }
解决方案 2
您可能需要尝试删除"img"标签，并将"body"标签替换为以下内容：
<body style="background-image:url(images/example-image-file.jpg)">
这将使整个图像成为页面的背景。
引用
- http://www.w3schools.com/tags/att_body_background.asp