Question

我希望最终结果如下所示： 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;
}

和我的观看文件：

<body>
  <section class="Page">
    <figure id="logo"></figure>

    @*--Other omitted sections--*@
    .....
    .....
  </section>
</body>

我应该怎样做才能获得理想的效果。

感谢您的帮助

EDIT。

jsFiddle：http://jsfiddle.net/ngsEG/1/

查看内容如何不调整大小以及图像是否正确显示。如果我在.page部分添加overflow：hidden，那么页面会调整大小，但图像溢出也会被隐藏。

Answer 1

好的，随着您发布的小提琴，很明显您的问题与徽标的absolute位置无关。相反，您的@*--Other omitted sections--*@及其css是问题，即float #MainContent未被.Page元素包裹。由于您尝试使用徽标，我同意，overflow: hidden或auto的典型修补程序在此处不起作用。但是，旧的clearfix解决方案应该。所以：

.Page:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

See the fiddle.

注意：如果需要IE7或更低版本支持，请参阅上面clearfix链接中的其他信息。

需要溢出：一侧可见并溢出：隐藏在底部

1 个答案: