我现在正在一个网站上工作，但是我在将图像放在 2 个 div 的顶部时遇到了一些问题，还有一个问题是底部的 div 是页脚，我当然想保持在底部(这部分有效，但 div 顶部的图像无效)
这是一张图片，可以更好地向您展示我的想法:
如果您需要查看我的代码，我想知道一些关于如何实现它的想法。
对于已经在我的帖子下发表评论的人， 首先感谢您的宝贵时间，但遗憾的是它没有用(到目前为止我一直在尝试您的建议) 但为了帮助您更多地理解我尝试做的事情，我给了您一些我的代码。
<html>
<head>
<style type="text/css">
/* general */
body { background: #fdfdfd; font: 12px Verdana, Geneva, sans-serif; color:#444; margin: 0 0 300px; /* bottom = footer height */}
html { position: relative; min-height: 100%;}
.fix_width { width: 940px; margin: 0 auto; }
.fix_width:after, .left_foot_cont ul li:after { content: " " ; display:block; height:0; clear:both; visibility:hidden; }
#header { background:#6FF; height:100px; z-index: 3; position: relative; border-top: color: #555555 thick; border-width:5px; }
#container { position:relative; top:0px; margin-top:100px; overflow: auto;}
.cont {width:250px; padding-left:20px; margin-left:10px; display:inline-block; float:left; }
#footer { background: #A9CF38; position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;}
img {width:940px; }
</style>
</head>
<body>
<div id="header">
<div class="fix_width">
<h2>
Just the header nothing important
</h2>
</div>
</div>
<div id = "container">
<div class="fix_width">
<div class="cont">
<h2>
Lorem ipsum
</h2>
<p class="last">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</p> <!-- End p.last -->
</div><!-- End .cont -->
</div> <!-- End .fix_width -->
</div><!-- End .container -->
<!-- Where should i put the image ????? --->
<img src="http://www.mormonshare.com/sites/default/files/handouts/cg_banner-blank.gif"> </img>
<div id = "footer">
<div class="fix_width">
<div class="footer_con_left">
<h2>
Lorem ipsum
<br /><br />
</h2>
<h1>
dolor sit amet
<br />
dolor sit amet
<br />
dolor sit amet
<br />
dolor sit amet
</h1>
</div> <!-- End. footer_con_left -->
</div><!-- Einde class fix_width -->
</div> <!-- Einde class footer -->
</body>
</html>
正如您在代码中看到的图像，我希望将此图像放置 50% 的空白区域和 50% 的绿色区域(因此在容器 div 和页脚 div 之间的代码中，或者也许最好在这些 div 之上说)
感谢您的帮助!
最佳答案
你应该在 DIV1 中放置一个图像，将 position:relative 设置为 DIV1，将 position:absolute 设置为 IMAGE 并设置 bottom:-50% 到图像或 bottom:0px;margin-bottom:-50%;
关于css - 网站 - 在 2 个 div 之间溢出图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18577232/