style =“ position：absolute”とstyle =“ position：relative”の違い

103

いずれかは私に違い伝えることができますstyle = "position:absolute"し、style = "position:relative" そしてそれらがどのようにケースが異なる私はそれを追加div/ span/ input要素を？

absolute今使っていますが、調べrelativeてみたいです。これはどのようにポジショニングを変更しますか？

css css-position

— ヴァルン
ソース

1

CSS 2.1 の 'position'プロパティ。

— Josh Lee、

@rolfl Hm、この編集は3年前の質問で本当に必要だったのですか？私はそれを「小さすぎる」と呼んだでしょう。

— 、リスター氏

3

@MrListerそれは「提案された編集」レビューキューに登場しました...私は年齢に気づきませんでした。しかし、それが60秒前の質問だった場合、違いがあったでしょうか？

— rolfl 2013年

@rolflそうではない。私はまだ「小さすぎる」と投票したでしょう。

— Mr Lister

178

絶対配置とは、要素がページレイアウトの通常のフローから完全に外れることを意味します。ページ上の残りの要素に関する限り、絶対的に配置された要素は単に存在しません。要素自体は、left, right, top and bottom属性を使用して指定した位置に、他のものの「上」のように個別に描画されます。

これらの属性で指定した位置を使用して、要素は最後の祖先要素内のその位置に配置されます。これは、position属性がstatic（position属性が指定されていない場合、ページ要素はデフォルトでstatic）またはドキュメント本体（ブラウザ）以外です。ビューポート）そのような祖先が存在しない場合。

たとえば、次のコードがある場合：

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... <div>ブラウザのビューポートの上から20ピクセル、左端から20ピクセルの位置に配置されます。

しかし、私がこのようなことをした場合：

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... innerdivは、divの上部から20 outerピクセル、左端から20ピクセルにouter配置position:staticされますposition:relative。これは、を使用するように明示的に設定したため、divが一緒に配置されていないためです。

一方、相対配置は、配置をまったく指定しないのと同じですが、left, right, top and bottom属性によって要素が通常のレイアウトから「外れます」。ページ上の残りの要素は、要素が通常の場所にあるかのようにレイアウトされます。

たとえば、次のコードがある場合：

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... 3つの<span>要素すべてが重なり合うことなく隣り合って配置されます。

次の<span>ように、相対配置を使用するように2番目を設定すると、

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

...次にSpan2はSpan1の右側を5pxオーバーラップします。Span1とSpan3は、最初の例とまったく同じ場所に配置され、Span2の右側とSpan3の左側の間に5pxのギャップが残ります。

少しわかりやすくなることを願っています。

— エージェント難問
ソース

39

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

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

ソース

— プレムラジ
ソース

15

あなたは間違いなく「A List Apart」からこのポジショニングの記事をチェックしたいと思うでしょう。CSSの位置付けをわかりやすくするのに役立ちました（この記事の前は、私には気が狂っていました）。

— jbrennan
ソース

8

CSSの配置により、要素をページ上の必要な場所に正確に配置できます。

CSS配置を使用する場合、最初に行う必要があるのは、CSSプロパティの位置を使用して、絶対配置と相対配置のどちらを使用するかをブラウザーに通知することです。

両方のポジションに異なる機能があります。CSSでは、位置を設定すると、上、右、下、左の属性を使用できるようになります。

絶対位置

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

相対位置

相対的に配置された要素は、その通常の位置に対して相対的に配置されます。

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

詳細：位置相対vs絶対

— ゴウリシャンカー
ソース

6

わかりました、ここで非常に明白な答え...基本的に、相対的な位置は前の要素またはウィンドウに対する相対的ですが、上と左を使用する場合、それが親でない限り、絶対的に他の要素を気にしないでください...

私が作成した例を見て、違いを示してください...

また、私が作成した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>

スニペットを展開

— アリレザ
ソース

4

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

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

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

相対位置は、要素が配置されている場所を基準にしています。

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

^要素を元々座っていた場所の左から1px下、1pxに配置します:)

— ダミアン・ライト
ソース

3

相対的：

の要素position: relative;は、通常の位置を基準にして配置されます。
相対要素に配置属性（上、左、下、または右）を追加しない場合、その配置にはまったく影響しません。position: static要素として正確に動作します。
ただし、たとえばtop：10px;などの他の配置属性を追加すると、通常の位置から10ピクセル下に位置が移動します。
このタイプの配置の要素は他の要素の影響を受け、それ自体も他の要素に影響します。

絶対の：

の要素をposition: absolute;使用すると、任意の要素を希望する場所に正確に配置できます。配置属性は、上、左、下を使用します。場所を設定する権利。
これは、最も近い非静的な祖先を基準にして配置されます。そのようなコンテナがない場合は、ページ自体に対して相対的に配置されます。
ページ上の要素の通常のフローから削除されます。
このタイプの配置の要素は、他の要素の影響を受けず、他の要素のフローにも影響しません。

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

— プランシュ・ティワリ
ソース

0

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

位置：相対; 左：-20px;

テキストが画面の左端から20px以内にある場合、テキストの左側が非表示になることがあります。

— チャールズジンク
ソース

0

position: absolute 0,0のように、どこにでも置くことができます。

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

— Vil Ignoble
ソース

0

位置：親要素として機能する相対位置。絶対位置：相対位置の子として機能します。あなたは以下の例を見ることができます

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

— イムラン・カーン
ソース