javascript - 要素の位置を固定位置要素の 5px 下に設定する方法

Question

例: 第 1 部門:

<div style='position: fixed; width=100%'> ....</div>

ここで、前の Div のすぐ下に別の Div 5px を配置します。だから私はした

<div style='padding-top:5px; width=100%'> ....</div>

しかし、それは機能しませんでしpadding-topた。ウィンドウの上部と比較しているように見えますが、以前の Div とは比較していません。position: fixed;最初の div を削除すれば問題ありませんが、それは望ましくありません。

1 番目の Div の位置を固定し、2 番目の Div の位置を 1 番目の 5px のすぐ下に配置したい。では、どうやってそれを行うのですか？

Answer 1

position: fixed通常のフローから要素を削除します。フロー ポジショニングは使用できなくなりました。

あなたが望むことを行う適切な方法がある可能性がありますが、XではなくYについて教えてくれたので、あなたが何を望んでいるのかわかりません: https://meta.stackexchange.com/questions/66377/what-is-the- xy問題

---

私はあなたが何を望んでいるのか理解していると思います。ヘッダーの高さが常にわかっている場合は、オフセット、パディング、マージンの両方を追加するだけで機能します。

<div id="header" style="position: fixed; top: 0; width: 100%; height: 20px;">
<div id="content" style="margin-top: 20px;">Content goes here</div>

ヘッダーの高さを変更できる場合は、CSS を調整して、ヘッダーとコンテンツの高さとコンテンツがそれぞれ変更されるようにします。

<div id="container" class="adjustheaderheight">
    <div id="header">
    <div id="content">Content goes here</div>
</div>

#header { position: fixed; top: 0; width: 100%; height: 20px; }
#content { margin-top: 20px; }
#container.adjustheaderheight #header {
    height: 40px;
}
#container.adjustheaderheight #content {
    margin-top: 40px;
}

ヘッダーの高さが動的に変化する場合は、コンテンツ オフセットを動的に変更する必要がありますが、動的ヘッダーを使用しないことを強くお勧めします。

Answer 2

これらの両方の部門を別の部門に含めて、この新しい外側の部門の位置を固定したい場合があります。このように --->

<div style='position: fixed; width=100%'>
  <div style='width=100%'> ....</div>
  <div style='padding-top:5px; width=100%'> ....</div>
</div>

Answer 3

Margin を試してもうまくいかない場合は、div 内に背景色や画像がない限り、自由にパディングを使用してください。これを行う 2 つの方法の違いを区別することはできません。 .

Answer 4

2 つの div を固定位置のラッパーに入れます。また、CSS 構文が無効です width=100% は width:100% でな​​ければなりません。

<div style="position: fixed;">
   <div style=' width:100%'> ....</div>
   <div style='margin-top:5px; width:100%'> ....</div>
</div>

ただし、これにより 2 つの div が固定されます...これは、必要なものではない可能性があります。次のことができます。

    <div style='position: fixed; width:100%'> ....</div>
   <div style='position:absolute; width:300px;height:200px;top:300px;left:300px'> ....</div>

css 値は単なる例です...

アップデート：

これは、あなたの望むことですか？ http://jsfiddle.net/kasperfish/K8N4f/1/

<div id="fixed">fixed</div>
<div id="widget" >content <br>hjgjhgjhgjhgh</div>

#fixed{
    width:100%;
    position:fixed;
    background:yellow;
    height:50px;
    z-index:2;
}
#widget{

    background:blue;
    position: absolute;
    top:55px;
    margin-top:15px;
    width:100%
}

Answer 5

代わりにマージントップを試しましたか? margin-top: 5px