0

私のウェブページの上部が残るように修正するのを手伝ってくれる人がいるかどうか疑問に思っていました.

position:fixed 属性を使用してみましたが、コンテンツが固定 div と重なるため、すべてが妨げられます。

私のウェブサイトはここにあります：

www.crookedcartoon.co.uk/print.html

navbar の上にあるものはすべて、navbar を含めてページの上部に固定し、コンテンツをその下にスクロールしたいと思います。

これは、画像の大部分を png ではなく jpg に変更する必要があることを意味する場合があることを認識しています。しかし、とにかくこの周りにあるのだろうかと思っていましたか？PNG 画像の透明な部分を通してコンテンツが表示される場所で、ページの上部に到達するのではなく、コンテンツが下にスクロールして消える偽の行を作成するのと同じように。これが唯一の方法でない限り、私は本当にiframeを使いたくありません。

ありがとう！

4

2 に答える 2

3

Aniframeは確かにここでは正しい選択ではありません。上に置きたいものの周りにdivを置き、position: fixedそれを置き、左上隅に配置します。

<div class="ontop">
    <div id="top"></div>
    <div id="logo"></div>
    <div id="contact"></div>
    <div id="navbar"></div>
</div>

その後、の高さに等しい数を追加margin-topします。これが必要なのは、ドキュメント フローから取り出され (理由により)、コンテンツがその下に移動するためです。#content-holder.ontopposition: fixed

にも追加background-color: whiteする.ontopと、透明性の問題はなくなります。

セットアップを複製しようとしました。これは動作するデモです。

于 2013-07-02T10:14:22.937 に答える
-1

あなたはこれを試すことができます

下部の部分を透明にし、上部の背景を白にして画像を更新したので、cssの下を更新してください。[1 - 画像をダウンロードして確認]

#ontop {
    background: inherit;
    height: auto;
    margin-top: -10px;
    position: fixed;
    z-index: 10;
}
#contact {
    background: none repeat scroll 0 0 white;
    height: 45px;
    margin-bottom: 1px;
    margin-left: -5px;
    margin-top: -8px;
    position: relative;
    vertical-align: top;
    width: 1127px;
}
#logo {
    height: 62px;
    margin-left: -10px;
    position: relative;
    width: 1127px;
    z-index: 1111;
}

] 1

于 2013-07-02T10:32:36.877 に答える