我有一个相对简单的 HTML 布局，其中一个 div 旨在显示在 img 的顶部。
但实际发生的是 div 显示在图像下方。您知道我如何让 ID 为“main”的 div 显示在 ID 为“mainImg”的 img 的顶部(但 div 也需要/保持居中)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
#mainImg { z-index: -1; }
#main { text-align: center; width: 1000px; height: 700px; top: 0px; }
#navBar { float: left; width: 200px; height: 700px; /*margin-left: 10%; margin-top: 20%; padding: 30px; width: 20%;*/ }
#content { float: left; width: 800px; height: 700px; /*margin-right: 10%; margin-top: 20%; padding: 30px; width: 80%;*/ }
-->
</style>
</head>
<body>
<div id="heading">
<img src="images/heading.png" alt="" width="100%" height="300px"/>
</div>
<img id="mainImg" src="images/mainBackground.png" alt="" width="100%" height="100%"/>
<!-- the below div is meant to be displayed over the top of the above image but it actually get display below it -->
<div id="main">
<div id="navBar">
<img src="images/navBackground.png" alt="" width="100%" height="700px"/>
</div>
<div id="content">
<img src="images/contentBackground.png" alt="" width="100%" height="700px"/>
</div>
</div>
</body>
<!-- InstanceEnd -->
</html>
最佳答案
我强烈建议不要将 img 标签用于您网站的背景，而是将背景图像样式应用于 div 或您的 body 标签。 这样您就可以保持 float 布局并且内容将显示在图像上方，因为您的#main div 可以嵌套在应用了背景图像的元素内。
例如 css 将是:
body { background:url('images/mainBackground.png'); }
然后从您的标记中删除 img (#mainImg) 标签
您可能还想为您的导航执行此操作
关于javascript - 在 img 的顶部显示一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6223405/