我只想让 3 个 DIV 相互重叠。代码不多，当我在没有任何内容的情况下简单地执行时，它可以正确堆叠。不确定我做错了什么，但是代码在这里。我想在中间内容 DIV 下多一个 DIV。这用于底部信息栏。我知道 z-index 更多地用于图层，对我的知识没有帮助。
这是我的 HTML 代码:
<html>
<head>
<title>Mt. Rose, City of Refuge MEdia</title>
<link rel="stylesheet"
href="storage/mainsite/styles/default_button.css" type="text/css">
<link rel="stylesheet" href="storage/mainsite/styles/default_font.css"
type="text/css">
<link rel="stylesheet" href="storage/mainsite/styles/default_div.css"
type="text/css">
</head>
<body style="background-color: rgb(255, 255, 255); text-align: center;">
<br>
<div class="maindefault" style="display: block;"><!--Banner insert -->
<img src="storage/mainsite/bannerfinalfeathered.png" alt=""><a
class="button"
href="http://output93.rssinclude.com/output?type=iframe&id=456111&hash=c334e7f73918b535f66271d019d52a83"
title="Home" target="content"><span>Home</span></a> <a class="button"
title="About Us"
href="http://mtrosecogic.org/mtrose1/about"><span>About</span></a>
<a class="button" href="index.html" title="Mt. Rose Public Calendar"><span>Calendar</span></a>
<a class="button" href="/flash_newpage.html" title="Live Video Feed"><span>Live
Feed</span></a> <a class="button" target="content" href="access.html"
title="Restricted"><span>Access</span></a>
<a class="button" href="index.html"
title="Mt. Rose Virtual Learning Environment"><span>Education</span></a>
<a class="button" href="/flash_newpage.html"
title="City of Refuge Online Webstore!"><span>Store</span></a>
<a class="button" target="content" href="/interactive.html"
title="Interactive Media Gallery"><span><font face="Juice">Interactive</font></span></a>
</div>
<br>
<div class="maindefault">
<iframe
style="margin-top: 0px; margin-bottom: 0px; text-align: center; width: 416px; height: 800px; float: left;"
float="" marginheight="0" src="flash_newpage.html" id="flashframe"
name="flashframe" marginwidth="0" frameborder="0" scrolling="no"></iframe>
<iframe
style="overflow: auto; margin-top: 6em; margin-bottom: 0px; height: 600px; width: 400px; float: right; text-align: center;"
id="content" marginheight="0" marginwidth="0"
src="http://output93.rssinclude.com/output?type=iframe&id=456111&hash=c334e7f73918b535f66271d019d52a83"
name="content" frameborder="0"></iframe>
</div>
</body>
</html>
这是我的 div CSS(它是一个链接的样式表):
.maindefault {
margin: 0px auto;
width: 817px;
font-family: "High Tower Text",Georgia,Serif;
display: inline-block;
text-align: center;
}
此外，如果有帮助，我正在使用 Kompozer 8.3。谢谢你
编辑::我不熟悉 JS Fiddler，但链接是 mtrosemedia.tk。当我在最后一个 .maindefault div 下面添加另一个 </div> 时，会发生什么情况，我的新 DIV 紧贴在第二个 DIV 的顶部。我需要新的 DIV 紧贴第二个 DIV 的底部。然后，当我添加内容时，它会显示在我的 Flash 和 RSS 提要之上。我也想改进 Feed 列表，但我会提出另一个问题。
最佳答案
当你把内容放在里面时，你是说 div 重叠了吗？
尝试将 .maindefault 向左浮动。添加内容后，下一个 div 应该与上一个 div 的顶部对齐。
关于html - 阻止 DIV 与其他 DIV 重叠(CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10220508/