0

我希望最终结果看起来像这样： https ://dl.dropbox.com/u/65978956/Capture.JPG

  1. #logo 图像位于 .page div 内，一些文本溢出 div。
  2. #logo 图像的位置必须相对于 .page div 的位置，以便它始终按照它在图片上的方式定位。

问题是，因为当我将其位置设置为绝对时，我只能让#logo 重叠，所以 .page div 不再自动调整内容的垂直大小。

溢出-x 和溢出-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>

我应该怎么做才能达到预期的效果。

感谢您的帮助

编辑。

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

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

4

1 回答 1

3

absolute好的，通过您发布的小提琴，很明显您的问题与徽标的位置无关。相反，您的@*--Other omitted sections--*@和它的 css 是问题所在，即floaton#MainContent没有被.Page元素包裹。由于您尝试对徽标执行的操作，我同意，这里的典型修复overflow: hidden或auto不起作用。但是，旧的clearfix解决方案应该。所以：

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

见小提琴。

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

于 2012-07-30T15:40:58.437 回答