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

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

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

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

Q&A

解決済

1回答

1909閲覧

ポジションについてまとめたのですが、あっていますでしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

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

0グッド

0クリップ

投稿2015/12/31 04:00

ポジションについてまとめたのですが、あっていますでしょうか?


relativeは自分が基準位置となる親要素である事を宣言するために、positionで動かしたい、親要素に記載する。
absoluteはその親タグの中に内包されてある子要素に記載し、relativeをつけたタグから何PXのところに配置するとできる様になる。
つまり、この場合のabsoluteをつけるという事は、子要素が基準要素に従うという宣言である。

ちなみにtopなどを指定しない場合、top0、left0となる。左上に配置される。

*absolute単体の場合
absoluteは基準(親)のrelativeのプロパティを削除すると、基準がなくなるので、ブラウザを基準として配置されるように、変わる。
relativeをつけた基準となる要素が親要素にない場合は、その代わりにブラウザウインドウが基準の親になる。
ブラウザの左上から、何PXとなる。(絶対配置)

*relative 単体の場合
こちらがなぞです。ありうるのでしょうか?
ブラウザの左上から、何PXとなる。(絶対配置)になるのでしょうか?

*fixedもabsolute と基本は同じように指定して、同じように配置される。
基準から、この位置から(何ピクセルの所)動かないぞという、イメージ。
それプラス、スクロールしても固定される。

・positionは位置という意味

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

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

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

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

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

guest

回答1

0

ベストアンサー

●relative

absoluteとの最も大きな違いは、「自分自身が本来配置されるべき位置を基準として相対配置される」という点です。

通常配置フローの状態のまま、z-indexで上下の重なりを指定できるようになるため、単体での利用もありえます。

●fixed

absoluteとの違いは、常にブラウザを基準として配置される点と、スクロールせずウィンドウに固定される点です。

absoluteの理解は概ねあっていると思います。

投稿2015/12/31 05:16

aKusano

総合スコア3763

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

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

退会済みユーザー

退会済みユーザー

2015/12/31 07:20

>> ●relative absoluteとの最も大きな違いは、「自分自身が本来配置されるべき位置を基準として相対配置される」という点です。 つまり下記のように変更すべきという事でよいでしょうか? absoluteはその親タグの中に内包されてある子要素に記載し、relativeをつけたタグから何PXのところに配置するとできる様になる。 ↓ absoluteはその親タグの中に内包されてある子要素に記載し、自分自身が本来配置されるべき位置を基準として相対配置される。 (relativeをつけたタグから何PXのところに配置するのではなく、親要素は関係なしに、自分自身が本来配置されるべき位置が、0pxの基準になる) よく親要素からと聞きますが、間違っているのですね。 ・ relativeは自分が基準位置となる親要素である事を宣言するために、positionで動かしたい要素の、親要素に記載する。 absoluteはその親タグの中に内包されてある子要素に記載し、relativeをつけたタグから何PXのところに配置するとできる様になる。 つまり、この場合のabsoluteをつけるという事は、子要素が基準要素に従うという宣言である。 ちなみにtopなどを指定しない場合、top0、left0となる。左上に配置される。 *relative 単体の場合 あまり使わない。 通常配置フローの状態のまま、z-indexで上下の重なりを指定できるようになるため、単体での利用もありえます。 上記をもう少し具体的に教えていただければ幸いなのですが、単体なので絶対位置への配置となるんですかね。 relativeを使わなくても、z-indexで上下の重なりを指定できると思ったのですが、これを要素に指定しないとできないんでしたっけ? つまり、下記の認識でよろしいでしょうか? 通常配置フローつまり、フロートもポジションもかけていない、一番ノーマルな状態ですと、ネガティブマージンを使っても要素が重なる事は絶対にないので、 z-indexで上下の重なりを指定できないようになっている。(そもそも重なる事がないので、通常配置フローでz-indexを使う事がないので、気づかないが、z-indexが効かない仕様になっている。)
aKusano

2016/01/02 16:28

abosuluteの認識は最初のwebpageさんの認識であってますよ? >>absoluteはその親タグの中に内包されてある子要素に記載し、relativeをつけたタグから何PXのところに配置するとできる様になる。 ↑これでOKです。 ●absolute(絶対配置) 通常配置フローから切り離して包括ブロックを基準とする絶対配置が可能となります。 「包括ブロック」とは、position: relative(またはabsolute)が指定された直近の先祖要素になります。包括ブロックの指定をしなければbodyがその役割を果たします。 absoluteが指定されるとその要素は通常配置フローから切り離されるため、 もともとその要素が存在していた領域は無くなり、その場所は後続要素によって詰められます。 ●relative(相対配置) 通常配置フローの中で自分自身の座標を基準として相対配置が可能となります。 (本来配置される場所を基準として上下左右にずらして配置することができます) relativeの要素は通常配置フローから切り離されることが無いため、staticの要素と同じように前後の要素と連動して配置されます。従って、relativeが指定されただけであれば通常のstaticの要素と表示上は何も変わりません。 ただし、staticと違いleft/right/top/bottomによって座標指定が可能になり、z-indexも使えるようになります。 ●z-index 要素同士の上下レイヤーの入れ替えを指定できるz-indexは、positionの値がstatic以外の時にしか効きません。(つまりrelative, absolute, fixedなら効く) 以上のことから、絶対配置のための包括ブロック指定目的以外に、 relativeを単体で使用するケースというのは、 「通常配置フロー(フロート含む)のまま、その要素自身にz-indexやleft/right/top/bottomの指定をしたい場合」 というのが主な目的となりますね。 これ以外だと、何かのバグを直すための「おまじない」というケースもあります。 おわかりでしょうか?
退会済みユーザー

退会済みユーザー

2016/01/03 09:25

何度もありがとうございます。 1. 相対配置について *relative、absolute両方を記載する場合 relativeをつけたタグから何PXのところに配置する事という説と relativeをつけたタグからでなく、absoluteを設置したタグが、本来配置される場所を基準として、何PXのところに配置する事という説があるのですが、 positionの相対配置とはどちらなのでしょうか? 2. まとめ *relative、absolute両方を記載する場合(相対配置) ・ relativeは自分が基準位置となる親要素である事を宣言するために、positionで動かしたい、親要素に記載する。 absoluteはその親タグの中に内包されてある子要素に記載し、relativeをつけたタグから何PX( 自分自身が本来配置されるべき位置を基準として相対配置される)のところに配置するとできる様になる。 つまり、この場合のabsoluteをつけるという事は、子要素(absolute をつけた要素)が基準要素に従うという宣言である。 ・ ちなみにtopなどを指定しない場合、top0、left0となる。左上に配置される。 *absolute単体の場合 (絶対配置) ・ 包括ブロックの指定をしなければbodyがその役割を果たします。 (絶対配置) absoluteは基準(親)のrelativeのプロパティを削除すると、基準がなくなるので、ブラウザを基準として配置されるように、変わる。 つまり、relativeをつけた基準となる要素が親要素にない場合は、その代わりにブラウザウインドウが基準の親になる。 ブラウザの左上から、何PXとなる。(絶対配置) *relative 単体の場合 (相対配置) ・初期の状態との違い。(positionを自分で特別に指定していない初期の状態)    ・positionがかかっていない状態では使えない、効かない、z-indexも使えるようになります。 ・static(positionを自分で特別に指定していない初期の状態) と違いleft/right/top/bottomによって座標指定が可 能になる。 ・特徴 relativeの要素は通常配置フローから切り離されることが無いため、staticの要素と同じように前後の要素と連動して配置されます。 positionを自分でかけていない要素と同じように、上に動かすと上の要素もつられて上に動く。 ネガティブマージンなど特殊なことをしないと要素が重ならない。 ・使うケース 絶対配置のための包括ブロック指定目的以外に、relativeを単体で使用するケースというのは、 「通常配置フロー(フロート含む)のまま、その要素自身にz-indexやleft/right/top/bottomの指定をしたい場合」 というのが主な目的となりますね。 これ以外だと、何かのバグを直すための「おまじない」というケースもあります。 *fixed(基本的には、絶対配置) ・ fixed もabsolute と基本は同じように指定して、同じように配置される。 基準から、この位置から(何ピクセルの所)動かないぞという、頑固なイメージ。 それプラス、スクロールしても固定される。 ・ absoluteとの違いは、常にブラウザを基準として配置される点と、スクロールせずウィンドウに固定される点です。 ・ただし下記の方法で相対配置もできるらしい。 position:fixedで、左端を親要素基準にする https://javelinadevil.wordpress.com/2012/07/09/positionfixed%E3%81%A7%E3%80%81%E5%B7%A6%E7%AB%AF%E3%82%92%E8%A6%AA%E8%A6%81%E7%B4%A0%E5%9F%BA%E6%BA%96%E3%81%AB%E3%81%99%E3%82%8B/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問