163

CSSのposition: relativeとの違いは何ですか? position: absoluteまた、いつそれらを使用する必要がありますか?

4

10 に答える 10

169

CSS の絶対配置

position: absolute;

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

position: absolute;

これにより、配置されるものはすべて、ドキュメントの通常の流れから削除され、ページ上の正確な場所に配置されることがブラウザに通知されます。HTML 内の前後の要素が Web ページ上でどのように配置されるかには影響しませんが、オーバーライドしない限り、親の配置に従います。

ドキュメント ウィンドウの上部から 10 ピクセルの位置に要素を配置する場合は、そこへのtopオフセットを配置に使用します。positionabsolute

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。

パラグラフ3。

上記の例では、3 番目の段落は3emコンテナー要素の左側に配置されますが、最初の 2 つの段落よりも下になります。ドキュメントの通常の流れにとどまり、わずかにオフセットされます。に変更するとposition: absolute;、ドキュメントの通常のフローではなくなるため、その後に続くものはすべてその上に表示されます。

ノート：

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

  • 要素を絶対配置要素とオーバーラップさせることはできますが、相対配置要素ではこれを行うことはできません (つまり、負のマージン/配置を使用しない場合)。

取得したロット: このリソース

于 2012-05-03T06:57:02.673 に答える
22

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

次の影響を生み出す簡単な例を示すブログ投稿を書きました。

ここに画像の説明を入力

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

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

于 2013-02-12T18:27:01.933 に答える
19

相対的な位置：

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

絶対位置：

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

これは、絶対位置と相対位置の両方での両方の位置の使用例を含む、優れたチュートリアルhttp://www.barelyfitz.com/screencast/html-training/css/positioning/です。

于 2012-05-03T06:54:48.953 に答える
13

Relative : 現在の位置に相対的ですが、移動できます。または RELATIVE 配置エレメントが 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ます。1 番目の親divの位置が相対的な場合、中間divは 1 番目の親に対する位置を変更しdivます。詳細

于 2016-05-25T17:12:03.980 に答える
0

Absolute は要素をフロー レイアウトから外し、最も近い相対的な親に配置されます (既定では、すべての親は静的です)。これが、ほとんどの場合、絶対と相対を一緒に使用する方法です。

relative のみを使用することもできますが、それは非常にまれなケースです。

これを説明するビデオを作りました。

https://www.youtube.com/watch?v=nGN5CohGVTI

于 2020-08-07T00:52:36.153 に答える