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

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

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

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

Q&A

解決済

1回答

221閲覧

Position Property AbsoluteとRelativeの順番

nozatodogers

総合スコア30

CSS

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

0グッド

0クリップ

投稿2018/11/15 06:04

あるページ内にPositionProprtyがAbsoluteとRelativeだけがあると想定してください。

https://gyazo.com/b696eee92932eb460a3de7a88710b801
画像URLから一番最初に出てくるProprtyはAbsoluteだけで、最初がRelativeで二番目からAbsoluteというのは
あり得ないのではないか

https://gyazo.com/081eb3e7b308b5cb727f775f4c7dc220
この場合の本来の表示位置とはどういうことでしょうか
本来の表示位置はなぜ上から3番目なのでしょうか

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

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

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

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

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

yoshinavi

2018/11/15 13:44

コードを提示してください。
guest

回答1

0

ベストアンサー

最初がRelativeで二番目からAbsoluteというのはあり得ないのではないか

親要素にposition:relative;が指定されていて、子要素にposition:absolute;を指定する状況は、充分ありえます。

子要素position:absolute;を配置する基準は、親要素にあり、親要素にposition:relative;が指定されていない時は、さらにその親要素の親要素等の上位に移行し、最終的にはbody要素に配置の基準が移ります。


本来の表示位置とはどういうことでしょうか

本来の表示位置はなぜ上から3番目なのでしょうか

div等の要素が縦に3つ並んでいると「仮定」した場合の話です。複数の要素が並んでいるのを表しているだけなので、1つでも2つでも、あるいは10個以上並んでいても同じです。

その最後の要素にposition:relative;を設定したら、指定位置に移動するが、元々の位置に空白の領域が確保された状態で残ります。

仮に、上2つと同じように4番目を設定すると、position:absolute;との違いが分かりやすいかと思いますので、ご自身でいろいろな設定で確認してみてください。


-追記-
質問のあったサンプルです

基本配置

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<title>example</title> 8<style> 9* { 10 margin: 0; 11 padding: 0; 12 box-sizing: border-box; 13} 14 15body { 16 padding: 100px; 17} 18 19.box-a { 20 width: 300px; 21 height: 50px; 22 padding: 10px; 23 background-color: lightcoral; 24} 25 26.box-b { 27 width: 300px; 28 height: 50px; 29 padding: 10px; 30 background-color: lightskyblue; 31} 32 33.box-c { 34 width: 300px; 35 height: 50px; 36 padding: 10px; 37 background-color: khaki; 38} 39 40.box-d { 41 width: 300px; 42 height: 50px; 43 padding: 10px; 44 background-color: limegreen; 45} 46</style> 47</head> 48<body> 49 <div class="box-a">box-a</div> 50 <div class="box-b">box-b</div> 51 <div class="box-c">box-c</div> 52 <div class="box-d">box-d</div> 53</body> 54</html>

3番目(box-C)にposition:relative;設定

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<title>example</title> 8<style> 9* { 10 margin: 0; 11 padding: 0; 12 box-sizing: border-box; 13} 14 15body { 16 padding: 100px; 17} 18 19.box-a { 20 width: 300px; 21 height: 50px; 22 padding: 10px; 23 background-color: lightcoral; 24} 25 26.box-b { 27 width: 300px; 28 height: 50px; 29 padding: 10px; 30 background-color: lightskyblue; 31} 32 33.box-c { 34 width: 300px; 35 height: 50px; 36 padding: 10px; 37 background-color: khaki; 38 position: relative; 39 top: 10px; 40 left: 10px; 41} 42 43.box-d { 44 width: 300px; 45 height: 50px; 46 padding: 10px; 47 background-color: limegreen; 48} 49</style> 50</head> 51<body> 52 <div class="box-a">box-a</div> 53 <div class="box-b">box-b</div> 54 <div class="box-c">box-c</div> 55 <div class="box-d">box-d</div> 56</body> 57</html>

3番目(box-C)にposition:absolute;設定

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<title>example</title> 8<style> 9* { 10 margin: 0; 11 padding: 0; 12 box-sizing: border-box; 13} 14 15body { 16 padding: 100px; 17} 18 19.box-a { 20 width: 300px; 21 height: 50px; 22 padding: 10px; 23 background-color: lightcoral; 24} 25 26.box-b { 27 width: 300px; 28 height: 50px; 29 padding: 10px; 30 background-color: lightskyblue; 31} 32 33.box-c { 34 width: 300px; 35 height: 50px; 36 padding: 10px; 37 background-color: khaki; 38 position: absolute; 39 top: 10px; 40 left: 10px; 41} 42 43.box-d { 44 width: 300px; 45 height: 50px; 46 padding: 10px; 47 background-color: limegreen; 48} 49</style> 50</head> 51<body> 52 <div class="box-a">box-a</div> 53 <div class="box-b">box-b</div> 54 <div class="box-c">box-c</div> 55 <div class="box-d">box-d</div> 56</body> 57</html>

投稿2018/11/16 07:12

編集2018/11/17 06:58
yoshinavi

総合スコア3521

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

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

nozatodogers

2018/11/17 06:12

>親要素にposition:relative;が指定されていて、子要素にposition:absolute;を指定する状況は、充分ありえます。 この場合、子要素がabsoluteの場合が親要素が子要素をrelativeで基準位置を#wrapの箇所で指定 していくという考え方であれば理解できるのですが、 例を示せば下記のような状態です。 https://gyazo.com/5e270fb670e749ade15ac7b2f456698b https://gyazo.com/12e546ed5696abaf350c1ae376a2a8fe >その最後の要素にposition:relative;を設定したら、指定位置に移動するが、元々の位置に空白の領域が確保された状態で残ります。 仮に、上2つと同じように4番目を設定すると、position:absolute;との違いが分かりやすいかと思いますので、ご自身でいろいろな設定で確認してみてください。 これはコードとプレビューで確認できる方法はないですか
yoshinavi

2018/11/17 06:33

最初の疑問ですが、「relative」と、「float」や「absolute」との大きな違いが、自分自身の現在位置の領域は残したまま、見かけ上移動する事です。 提示サンプルで言えば「#box2」は、「#box1」の空きスペースを詰める事が出来ません。そこは空白ですが「#box1」の領域が確保されて残っているからです。
yoshinavi

2018/11/17 06:59 編集

(編集しました)2番目の疑問のコードは「追記」で提示しましたので、ご確認ください。
nozatodogers

2018/11/20 04:57

詳しい回答ありがとうございます。プレビュー機能で確認したら、だいぶわかりやすいです。 Absoluteの場合は親要素を基準にしていますね。 例のRelativeは他のa.b,dの要素がなければ、この場合はRelativeを使えないですね。 この場合a,b,dは子要素というのですか。 多分、これで理解できたと思います。
yoshinavi

2018/11/20 05:01

「position」プロパティは、最初は理解しにくいかも知れませんね。しかし、キチンと理解出来れば、レイアウト時の強い味方になってくれますので、頑張ってください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問