【问题标题】：table is hidden behind img html表格隐藏在 img html 后面
【发布时间】：2016-06-14 00:46:02
【问题描述】：

我的 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>

【问题讨论】：

您必须添加正确的sn-p。
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。
我和马科斯在这件事上.. 没有足够的信息让我们尝试帮助...

标签： html image html-table

【解决方案1】：

更正

您的代码错误。 “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

【讨论】：