相対位置と絶対位置

違いは何であるposition: relativeとposition: absoluteCSSでは？そして、あなたはどちらを使うべきですか？

CSSの絶対配置

position: absolute;

絶対配置が最も理解しやすいです。CSS positionプロパティから始めます。

position: absolute;

これは、配置されるものはすべてドキュメントの通常のフローから削除され、ページ上の正確な場所に配置されることをブラウザに伝えます。それはしかし、HTMLでその前か後の要素は、Webページ上に配置されている方法に影響はありませんでしょう、あなたがそれを上書きしない限り、それの両親のポジショニングの対象となります。

あなたは10個のピクセル、ドキュメントウィンドウの上部から要素を配置したい場合は、使用するtopにオフセットpositionしてそこにabsolute配置します：

position: absolute;
top: 10px;

この要素は10px、要素が（視覚的に）要素の下または上を通過するコンテンツに関係なく、常にページの上部から表示されます。

4つの配置プロパティは次のとおりです。

1. top
2. right
3. bottom
4. left

それらを使用するには、それらをオフセットプロパティと考える必要があります。つまり、配置された要素right: 2pxは右に移動しません2px。その右側は、ウィンドウの右側（または親をオーバーライドする位置）からによってオフセットされ2pxます。他の3つについても同じことが言えます。

相対配置

position: relative;

相対配置では、配置と同じ4つの配置プロパティを使用しabsoluteます。ただし、要素の位置をブラウザのビューポートに基づくのではなく、要素がまだ通常のフローにある場合の要素の位置から始まります。

たとえば、Webページに3つの段落があり、3番目の段落にposition: relativeスタイルが配置されている場合、その位置はビューポートの元の側からではなく、現在の位置に基づいてオフセットされます。

段落1。

パラグラフ2。

ノート：

• width絶対に配置される要素のデフォルトは、要素のコンテンツの幅です。デフォルトである場所に相対的に配置される要素とは異なり、埋めることができるスペースとwidthは異なります100%。

• 絶対配置された要素と重複する要素を持つことができますが、相対的に配置された要素ではこれを行うことはできません（本来、つまり負のマージン/配置を使用しない場合）。

から引き出されたロット： このリソース

「相対」と「絶対」の両方の位置付けは、フレームワークが異なるだけで、実際には相対的です。「絶対」配置は、別の囲み要素の位置を基準にしています。「相対」配置は、要素自体が配置しない場合の位置を基準にしています。

どちらを使用するかは、ニーズと目標によって異なります。「相対」位置は、要素のフロー内にあるはずの位置から要素を移動したい場合、たとえば、一部の文字を上付きの位置に表示する場合に適しています。「絶対」配置は、要素を別の要素によって設定された座標系に配置するのに適しています。たとえば、画像にテキストを「オーバープリント」する場合などです。

特別な点として、position: relative要素を参照のフレームにするために、変位なしの「相対」配置（を設定するだけ）を使用して、要素内（マークアップ内）の要素に「絶対」配置を使用できるようにします。

もう1つ注意すべき点は、絶対要素を親要素に限定する場合は、親要素の位置を相対に設定する必要があることです。これにより、親要素内に含まれる子要素が保持され、ウィンドウ全体に対して「相対的」にはなりません。

私は、次のような影響を与える簡単な例をブログに投稿しました。

これには、親の黄色のdivの下部に絶対的に配置された緑のdivがあります。

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

相対位置：

position：relativeを指定する場合、上または下、および左または右を使用して、ドキュメント内で通常発生する場所を基準に要素を移動できます。

絶対位置：

position：absoluteを指定すると、要素はドキュメントから削除され、指定した場所に正確に配置されます。

ここに、http： //www.barelyfitz.com/screencast/html-training/css/positioning/の良いチュートリアルがあります。絶対位置と相対位置の両方で、両方の位置の使用例を示しています。

相対： 現在の位置を基準にしていますが、移動できます。または、相対配置要素がITSELFに対して配置されています。

Absolute： ABSOLUTE配置要素は、IT'S CLOSEST POSITIONED PARENTに対して相対的に配置されます。存在する場合は、ウィンドウに対して固定のように機能します。

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

ここでは、2番目の親のdiv位置は相対的であるため、中央divは2番目の親に対する位置を変更しdivます。最初の親のdiv位置が相対的である場合、ミドルdivは最初の親に対する位置を変更しdivます。細部

私の評判はコメントするのに十分ではないので、答えを出す。しかし、これを答えとして見ないでください。私自身のように、追加情報はフッターと位置の両方にいくつかの問題がありました。

ページを設定するときに、フッターが常に絶対位置で、メインコンテナー/ラッパーが相対位置で表示されるようにします。

次に、テキストコンテンツと、同じコンテンツ内のメニュー（ヘッダーとフッターの間のページの白い部分）にいくつかの問題を発見しました。これらを絶対に設定すると、フッターが下にとどまらなくなりました。

ポジショニングは、あなたが言うように、複雑なテーマです。

私の解決策は、自分のWebページの「絶対」位置に必要なコンテンツを横に押し出さずに、たとえばドロップダウンメニューを開いたときに、実際にそれに相対的な位置を与え、ドロップダウンの下に35em置くことでした。メニュー。（35emは、完全に拡張したときの私のドロップダウンメニューの高さです）

次に、Top：-35em、以前に横にプッシュされたコンテンツ。次にmargin-bottom：-35emを追加します。このように、コンテンツは私のドロップダウンメニューの「下」にありますが、視覚的には私のドロップダウンメニューと並んでいます。そして、フッターの下の空白は、これをいじり始める前と同じように、わずか10emのマージンがあります。だからこれに対する私の解決策はこのようなものでした：

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

あなたの質問はうまく答えられたようですが、多くのトラブルの後、これは非常に良い解決策であり、配置がどのように機能するかをよりよく理解する方法であることがわかりました。テキストコンテンツをドロップダウンメニューの下に配置すると、 tテキストを横に押します。テキストを絶対位置に変更した場合、フッターは適切な位置に留まりませんでした。これは私よりも多くの人々の問題だと信じているので、ここに追加します。実際に起こったことは、ドロップダウンの下に35emsというテキストを置いたことです。

次に、相対的な位置とtop：-35em;で隣同士に視覚的に配置し、下にある巨大なスペースをマージン：-35emで外に出します。

負の値は時々過小評価され、非常に優れた機能であり、これらの位置をよりよく理解します！

通常、固定位置もフッターのロジックのように見えましたが、テキストまたはコンテンツがビューポートよりも長い場合は、フッターをビューポートの下に移動させたいです。そして、ページにコンテンツがほとんどない場合、一番下に留まります。

このsetuppはそれを非常にうまく修正し、より流動的で動的なページレイアウトのために「px」ではなく「em」を使用することを忘れないでください！:)

（より良い解決策があるかもしれませんが、これはデバイスだけでなくクロスプラットフォームでも機能します）。

相対vs絶対：

• 相違点：それ自体、最も近い位置にある祖先との相対。
• 違い：周囲のその他の要素は古い存在を尊重し、周囲のその他の要素は古い存在を尊重しません。
• 類似性：その周りの他の要素はその新しい存在を尊重せず、その周りの他の要素はその新しい存在を尊重しません。

絶対と相対の違いを説明するシナリオについて説明します。

body要素の内部に、高さがviewheightの95％、つまり95vhであるheader要素があると言います。このコンテナ内に画像を配置し、不透明度を0.5に下げました。次に、左上隅近くにロゴ画像を配置します。シナリオを理解していただければ幸いです。そのため、指定した位置の上部にロゴがあるヘッダーセクションの明るい画像が表示されます。

しかし、これを始める前に、マージンとパディングをこのように0に設定しました

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

これにより、デフォルトのマージンとパディングが要素に適用されなくなります。

したがって、2つの方法で要件を達成できます。

最初の方法

• あなたは画像にロゴを言うクラスを与えます。

• あなたが書くCSSで

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• これにより、ロゴである親であるヘッダーの上部と左側から40pxにロゴが配置されました。画像は希望どおりに配置されたように表示されます。

しかし、私の友人は、必要のないときにある程度のマージンを与えることによって、不必要に多くのスペースを消費した画像を配置するという悪いデザインです。必要なのは、その場所にイメージを配置することだけです。あなたは周りに余白をつけてクッションでそれを管理しました。余白はスペースを取ってコンテンツをより深く押し込み、希望どおりの位置に配置されているような印象を与えました。このように対処することで問題を理解していただければ幸いです。画像だけを目的の場所に配置するために必要なスペースよりも多くのスペースを使用しています。

では、別のアプローチを試してみましょう。

二番目の方法

• ロゴクラスの画像は、sayヘッダークラ​​スのヘッダー要素内にあります。したがって、以前のように、親クラスはヘッダーであり、子クラスはロゴです。

• あなたはこのようにヘッダークラ​​スの位置プロパティを相対的に設定します

  .header{ position: relative; }

• 次に、次のプロパティをロゴクラスに追加しました

  .logo{ position:absolute; top:40px; left:40px }

どうぞ。まったく同じ場所に画像を配置しました。最初のアプローチと2番目のアプローチでは、肉眼での位置付けに明らかな違いはありません。しかし、画像要素を調べると、余分なスペースをとっていないことがわかります。それはそれ自身の幅と高さだけでなく、正確に同じ領域を占めています。

では、これはどのようにして可能でしょうか？私はあなたがこのクラスの子であるのであなたがヘッダークラ​​スに相対的に配置されることをイメージロゴクラスに言った、そして私は具体的にそれが相対的な位置であると述べた。そのため、その子は左上隅を基準にして配置されます。そして、あなたの位置はこの親要素内で修正される必要があります。だから絶対に与えられます。そして、あなたは上から左に少し移動して、私がなりたい位置に移動する必要があります。したがって、値として40pxのtopプロパティとleftプロパティが与えられます。このようにして、親に対してのみ配置されます。だから明日私があなたの親を上下またはどこかに移動した場合、あなたは常に親ヘッダーの左上隅の上部と左側に40pxになるでしょう。したがって、あなたの親の位置が固定されているかどうかに関係なく、あなたの位置は親の中で固定されます（あなたのように絶対的なものではないため）。

したがって、親と子にはそれぞれ相対と絶対を使用してください。2つ目は、子要素をその親要素内の特定の場所にのみ配置する場合に使用します。余白などのフィラーを使用して無理に押し込まないでください。移動したい親の相対値と子、絶対値を与えます。子クラスに上、左下、または右のプロパティを指定して、親の内部の任意の場所に配置します。

ありがとう。

Marco Pellicciotta：別の要素内の要素の位置は、要素の内部を基準にして、相対的または絶対的です。

ブラウザーウィンドウの視点で要素を配置する必要がある場合は、position：fixedを使用するのが最適です。