質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

297閲覧

CSSのPosition

nece

総合スコア12

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/13 05:19

positionで指定するrelativeとabsoluteの違いについて教えていただきたです。
その際、絶対位置を指定したい時に親要素にrelativeを使う理由を教えて欲しいです。
よろしくお願いします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/08/13 12:05

検索すれば、いろいろな解説ページが出てくると思いますが、何か試したりした事は、ありませんか? また、どの辺りが理解しにくいのでしょうか?
guest

回答2

0

relative

要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が static であった時と同じです。

absolute
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の包含ブロックに対して相対配置されます。
position - CSS: カスケーディングスタイルシート | MDN

つまり、大まかに言うと、

  • relativeは通常のフローの位置を基準にし、absoluteは「包含ブロック」の位置を基準にする。
  • relativeは他のブロックのレイアウトに影響を与えず、absoluteは他のブロックからないものとされるのでレイアウトに影響を与える。

というところが違います。


If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

Layout and the containing block - CSS: Cascading Style Sheets | MDN

つまり、先ほどの「包含ブロック」にするために親要素をrelativeにしている、ということです。

投稿2019/08/13 06:31

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

その際、絶対位置を指定したい時に親要素にrelativeを使う理由を教えて欲しいです。

親要素にrelativeを指定していないとトップレベルの<html>がabsoluteの基準になるからです。
親要素にrelativeを指定するのはその親要素をabsoluteの基準にするためと思います。

投稿2019/08/13 11:43

querykuma

総合スコア777

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問