あるページ内にPositionProprtyがAbsoluteとRelativeだけがあると想定してください。
https://gyazo.com/b696eee92932eb460a3de7a88710b801
画像URLから一番最初に出てくるProprtyはAbsoluteだけで、最初がRelativeで二番目からAbsoluteというのは
あり得ないのではないか
https://gyazo.com/081eb3e7b308b5cb727f775f4c7dc220
この場合の本来の表示位置とはどういうことでしょうか
本来の表示位置はなぜ上から3番目なのでしょうか
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答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総合スコア3521
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/17 06:12
2018/11/17 06:33
2018/11/17 06:59 編集
2018/11/20 04:57
2018/11/20 05:01
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。