我希望最终结果是这样的: https://dl.dropbox.com/u/65978956/Capture.JPG
- #logo 图像位于 .page div 内，一些文本溢出了 div。
- #logo 图像的位置必须相对于 .page div 的位置，以便它始终按照图片上的方式定位。
问题是，因为当我将它的位置设置为绝对位置时我只能让#logo 重叠，所以 .page div 不再自动调整垂直内容的大小。
overflow-x 和 overflow-y 值不允许我实现我正在寻找的东西
body {
background-color: beige;
}
.page {
margin: auto;
position: relative;
width: 984px;
min-height: 800px;
}
#logo {
background-image: url(../Content/Site_Images/logo.png);
background-repeat: no-repeat;
height: 444px;
left: -98px;
margin-top: 5px;
opacity: 0.7;
position: absolute;
width: 381px;
z-index: -1;
}
和我的 View 文件:
<body>
<section class="Page">
<figure id="logo"></figure>
@*--Other omitted sections--*@
.....
.....
</section>
</body>
我应该怎么做才能达到预期的效果。
感谢帮助
编辑。
jsFiddle:http://jsfiddle.net/ngsEG/1/
查看内容如何不调整大小以及图像如何正确显示。如果我将 overflow:hidden 添加到 .page 部分，则页面会调整大小，但图像溢出也会被隐藏。
最佳答案
好的，根据您发布的 fiddle ，很明显您的问题与 Logo 的 absolute 位置无关。相反，您的 @*--Other omitted sections--*@ 及其 css 是问题所在，即 #MainContent 上的 float 是不被 .Page 元素包裹。由于您尝试对 Logo 进行处理，我同意，overflow: hidden 或 auto 的典型修复在这里不起作用。然而，旧的clearfix解决方案应该。所以:
.Page:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
注意:如果需要 IE7 或更低版本的支持，请参阅上面 clearfix 链接中的附加信息。
关于css - 需要溢出 :visible on one side and overflow:hidden on bottom side，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11723987/