2012-02-21 5 views
1

私はこの質問にどのように言い方が本当に分かりませんが、ここでは行きます...私はスクロールしてもトップに留まるように "固定"の位置を持つウェブページの上部にナビゲーションバーがありますダウン。しかし、私はスクロールするたびにこのナビゲーションバーと重なるテキスト/ブログのすべてを保持するボックスを持っています。divの外側に「パディング」を追加していますか?

ナビゲーションバーが重ならないように、ボックスのいくつかのピクセル(自分のものをすべて保持するピクセル)を「削除」する方法はありますか?これが混乱してもごめんなさい。申し訳ありませんが、私が言ったように、どうやってそれを語るのか分かりません。

スクリーンショット:
私は(重複)していたとき、私は
ダウンスクロールいないよ -

だから私は私のコンテンツコンテナ(の重複部分を取り除きたいと多分5px以下)。

+1

スクリーンショットを表示できますか? – Ryan

+6

「外側のパディング」は「マージン」と呼ばれ、CSSはこれをサポートします。それが役立つ場合は、余白を使用することもできます。 – mpen

+1

また、関連するhtmlとcssスニペットを表示してください。私は私の答えに推測の例を掲載しましたが、あなたの実際のコードを表示すると、あなたを助けるのがはるかに簡単になります。 –

答えて

0

他の回答には、その場です。マージンとオーバーフローの設定を確認したいと思います。

divの絶対位置、相対位置、または固定位置がある場合は、Z-インデックスを使用して再生することもできます。

Z-インデックスの値が高いほど、スタックの上位要素が高くなります。したがって、z-indexが2の要素は、z-indexが1の要素の前に表示されます。

+0

それはうまくいくが、私の部門は透明性を持っている。私はいくつかのスクリーンショットを投稿しました。 –

-1

それとも、あなたのメインのコンテンツが含まれているボックスでtop: #px;left: #px

+0

私は位置を設定する方法を知っている、私はちょうどナビゲーションバーの外側を "パッド"する方法を知りたい。 –

+0

質問が編集されていない限り、私は数時間前にこれを誤って下落させましたが、私は投票を変更できません。ごめんなさい。 – Wyatt8740

1

を使用することができますが、positionを使用している場合は、ナビゲーションバーの高さに等しいマージントップを追加します。これはあなたのhtmlのであれば、例えば:スクリーンショットのための

#navbar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 50px; 
} 

#content { 
    margin-top: 50px; 
} 
0

[OK]を、ありがとう:

<div id="navbar">...</div> 
<div id="content">...</div> 

次に、あなたのCSSは、このようなものになるだろう。

#navbar_id { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 50px; 
    z-index: 25; 
} 

#main_stuff_id { 
    z-index: 24; 
    /*other 
    style 
    rules*/ 
} 

はあまりにも心の中で「CSSボックスモデル」を保つ:http://www.w3schools.com/css/box-model.gif

+0

それはうまくいきませんでした。私はいくつかのスクリーンショットを追加しました。 –

0

あなたはposition: fixed;セットで要素のマージンを強制するように聞こえます。私はこれがうまくいくとは思わないが、実際に修正したい要素の周りに固定位置のコンテナを置くことができる。このコンテナはパディングを持つことができ、それによって望ましい効果が得られます。

<div style="position:fixed;padding:16px;background-color:#fff;width:100%;box-sizing:border-box"> 
    <!-- don't fix the inner element --> 
    <div style="background-color:red">The content you want to be fixed.</div> 
</div> 

ワーキングフィドル:http://jsfiddle.net/qtHtY/

+0

問題は私の部門が透明性を持っていることです。 –

+0

その場合、私はあなたが体をスクロールできるとは思わない。固定コンテンツの下にスクロール可能なDIVを設定することができます。 –

関連する問題