私はウェブサイトを作成しています。数行しかなく、構造を作成してどのように見えるかを確認しました。これまで、CSS の「相対」位置の意味を理解していると思っていました。これが私のHTMLとCSSコードです。CSS を見ると、#about divに表示されます。
position: relative;
top: 13%;
#ポートフォリオで
position: relative;
top: 0;
#wrap divの上にはありません。その位置を絶対に変更すると、上になります。だから私の質問は: #portfolio div は何に対して相対的ですか? ラップに対して相対的であるべきだと思いました。ラップに対して相対的に上部の位置を変更する必要があります。（この投稿のフォーマットについて申し訳ありませんが、フォーマットを改善していただければ、それは素晴らしいことです。試してみましたが、ひどいものでした）
position: relative;このオプションを指定しなかった場合の相対的な位置に項目が配置されます。アイテムは、以前と同じ「スペース」を占有しますが、移動することができます。これは、親内に配置することとは関係ありません。
例えば：
position: relative;
top: 5px;
アイテムは、そうでない場所から 5 ピクセル下に移動します。
position: relative;
top: -5px;
それ以外の場所から 5 ピクセル上に移動します。
また、オフセット量によっては、これを使用してオブジェクトを他のオブジェクトとオーバーラップさせたり、親の外に移動させたりすることもできます。
相対配置要素は、通常の位置を基準にして配置されます。
したがって、次のような HTML がある場合:
<div style="height: 30px; padding: 0px; margin 0px;">Content</div>
<div style="height: 30px; padding: 0px; margin 0px; position:relative; top: -30px">Overlapping Content</div>
2 番目の div は、通常配置される場所から 30 ピクセル上にシフトされるという点で、最初の div を覆い隠します。
正直なところ、ほとんどの Web デザインでは、実際の上/下/左/右の値で相対位置を使用することはめったにありません。ほとんどの場合position: relative、絶対配置要素を囲むコンテナ要素で単純に使用されます。
css プロパティposition:relativeは、要素を通常どおりフローに配置し、 と の値を追加しtop, left, rightますbottom。
MDN の CSS の位置を参照してください。
あなたの場合、#aboutを#portfolio使用して配置されてposition:relative;います。
#aboutは の 23% を占めて#wrapいるため、 の上部の#portfolio初期位置は の 23% になり#wrapます。
次に、 で#about位置を変更top:13%すると 13% に下がりますが、 に設定top:0;する#portfolioと 23% のままになります。
div を 内に配置したい場合は#wrap、 を設定する必要がありますposition:absolute;。それらは、最も近い位置にある祖先 (ここでは#content) またはそれを含むブロックに対して相対的に配置されます。
ポートフォリオは「コンテンツ」に関連しています。つまり、「コンテンツ」div に入れたものはすべて、彼の機能を継承します。