0

最終結果を次のようにしたいと思います: https://dl.dropbox.com/u/65978956/Capture.JPG

  1. #logo イメージは .page div 内に配置され、一部のテキストが div からはみ出しています。
  2. #logo 画像の位置は、.page div の位置に対して相対的でなければならないため、常に画像上にあるように配置されます。

問題は、 #logo の位置を絶対として設定した場合にのみ #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/

コンテンツのサイズが変更されず、画像が正しく表示される様子を確認してください。.page セクションに overflow:hidden を追加すると、ページのサイズが変更されますが、画像のオーバーフローも非表示になります。

4

1 に答える 1

3

absoluteさて、あなたが投稿したフィドルで、あなたの問題がロゴの位置とは何の関係もないことが明らかになりました. むしろ、あなた@*--Other omitted sections--*@とその css が問題でした。つまり、floatonが要素#MainContentによってラップされていませんでした。.Pageあなたがロゴでやろうとしていることのために、私は同意します.orの典型的な修正はここでは機能しoverflow: hiddenませautoん. ただし、古いclearfixソリューションは必要です。そう：

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

フィドルを参照してください。

注: IE7 以下のサポートが必要な場合は、上記の clearfix リンクの追加情報を参照してください。

于 2012-07-30T15:40:58.437 に答える