web-dev-qa-db-ja.com

スタイル= "position：absolute"とスタイル= "position：relative"の違い

style = "position:absolute"とstyle = "position:relative"の違いと、div/span/input要素に追加した場合の違いを教えてください。

現在absoluteを使用していますが、relativeも調べたいです。これによりポジショニングがどのように変わりますか？

csscss-position
96
Varun

相対配置：要素は、ビューポート座標軸からオフセットした位置に独自の座標軸を作成します。これはドキュメントフローの一部ですが、シフトしています。

絶対配置：要素は、親要素の中で最も近い利用可能な座標軸を検索します。次に、この座標軸からのオフセットを指定して要素を配置します。ドキュメントの通常フローから削除されました。

enter image description here

ソース

30
Premraj

A List Apartの このポジショニング記事 をぜひチェックしてください。 CSSのポジショニングを分かりやすくするのに役立ちました（この記事の前に、私には気が狂っているように見えました）。

14
jbrennan

CSSポジショニングを使用すると、要素をページ上の希望する場所に正確に配置できます。

CSSポジショニングを使用する場合、最初に行う必要があるのは、CSSプロパティの位置を使用して、絶対ポジショニングと相対ポジショニングのどちらを使用するかをブラウザに指示することです。

両方のPostionには異なる機能があります。CSSでは、Positionを設定すると、top、right、bottom、left属性を使用できます。

絶対位置

絶対位置要素は、静的以外の位置を持つ最初の親要素に対して相対的に配置されます。

相対位置

相対配置要素は、通常の位置を基準にして配置されます。

要素を相対的に配置するには、プロパティの位置を相対として設定します。絶対位置決めと相対位置決めの違いは、位置の計算方法です。

詳細： 相対位置と絶対位置

6
GowriShankar

OK、ここで非常に明白な答え...基本的に relative 位置は前の要素またはウィンドウに対して相対的であり、 absolute は気にしませんtopとleftを使用する場合、親でない限り、他の要素...

違いを示すために作成した例を見てください...

enter image description here

また、私が作成したcssを使用して、実際の動作を見ることができます。絶対位置と相対位置の動作を確認できます。

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}
<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>
5
Alireza

絶対配置は、ディスプレイの副次座標に基づいています。

position:absolute;
top:0px;
left:0px;

^は、要素をウィンドウの左上に配置します。


相対位置は、要素が配置されている場所に相対的です。

position:relative;
top:1px;
left:1px;

^要素を最初に座った場所の左から1pxおよび1pxに配置します:)

3
Damien-Wright

相対：

  1. position: relative;を持つ要素は、通常の位置を基準にして配置されます。

  2. 相対要素に配置属性（上、左、下、または右）を追加しない場合、その配置にはまったく影響しません。 position: static要素とまったく同じように動作します。

  3. ただし、top：10px;など、他のポジショニング属性を追加すると、通常の位置から10ピクセル下に移動します。

  4. このタイプの配置を持つ要素は、他の要素の影響を受け、それ自体も他の要素に影響します。

絶対：

  1. position: absolute;を含む要素を使用すると、任意の要素を必要な場所に正確に配置できます。上、左、下の配置属性を使用します。場所を設定する権利。

  2. これは、最も近い非静的な祖先を基準にして配置されます。そのようなコンテナがない場合は、ページ自体に対して相対的に配置されます。

  3. ページ上の要素の通常のフローから削除されます。

  4. このタイプの配置を持つ要素は、他の要素の影響を受けず、他の要素のフローにも影響しません。

わかりやすくするために、この自明の例を参照してください。 https://codepen.io/nyctophiliac/pen/BJMqjX

3
Pransh Tiwari

position: absoluteはどこにでも配置でき、0,0のようにそこにとどまります。

position: relativeは、ブラウザに最初に配置された場所からのオフセットで配置されます。

0
mainuse4r

Absoluteは、オブジェクト（div、spanなど）を絶対的な強制位置（通常はピクセル単位で決定）に配置し、relativeは通常の位置から一定量離れて配置します。例えば：

position：relative;左：-20px;

画面の左端から20ピクセル以内にある場合、テキストの左側が消える場合があります。

0
Charles Zink