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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1436閲覧

子要素absoluteの動き

maakun

総合スコア22

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2019/02/25 08:56

編集2019/02/25 09:25

親要素にposition: relative;
子要素にposition: absolute;
は子要素が親要素を基準に相対的な位置を取れることはわかるんですが、

親要素にposition: absolute;
子要素にposition: absolute;
の場合はの子要素も親要素を基準に相対的な位置を取れるんでしょうか?

単純な質問ですみません。

自分でやったテストを追記します。
孫要素の動きが親のabsoluteを基準に動いているように思えるのですが、いかかでしょうか?

html

1<div class="main-slider-wrap"> 2 <ul class="slide-group"> 3 <li class="box1"></li> 4 </ul> 5</div>

css

1 * { 2 margin: 0; 3 padding: 0; 4 } 5 li { 6 list-style-type: none; 7 } 8 .main-slider-wrap { 9 position: relative; 10 width: 500px; 11 height: 500px; 12 background-color: green; 13 } 14 .slide-group { 15 position: absolute; 16 top: 200px; 17 left: 200px; 18 } 19 .box1 { 20 width: 100px; 21 height: 100px; 22 background-color: orange; 23 position: absolute; 24 left: 0; 25 top: 0; 26 }

先祖要素である.main-slider-wrapのhtmlをコメントアウトしても孫要素の.box1が親要素である.slide-groupを基準に動いてます。
これはどういった動きなのでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

absoluteの要素(Aとする)の中にabsoluteの要素(Bとする)を配置した場合は、Aから相対的に指定が可能です。
実際に確認できるサンプル

html

1<div class="box-a sample-a">relative 2 <div class="box-b">relative 3 <div class="box-c">absoute 4 </div> 5 </div> 6</div> 7<div class="box-a sample-b">relative 8 <div class="box-b">absoute 9 <div class="box-c">absoute 10 </div> 11 </div> 12</div>

css

1.box-a { 2 background: rgba(255,0,0,0.2); 3 width: 400px; 4 height: 200px; 5 float: left; 6 margin-right: 50px; 7} 8.box-b { 9 background: rgba(0,255,0,0.2); 10 width: 150px; 11 height: 100px; 12 bottom: 0; 13 right: 0; 14} 15.box-c { 16 background: rgba(0,0,255,0.2); 17 width: 70px; 18 height: 50px; 19 top: 0; 20 right: 0; 21} 22 23.sample-a.box-a { 24 position: relative; 25} 26.sample-a .box-b { 27 position: relative; 28} 29.sample-a .box-c { 30 position: absolute; 31} 32 33.sample-b.box-a { 34 position: relative; 35} 36.sample-b .box-b { 37 position: absolute; 38} 39.sample-b .box-c { 40 position: absolute; 41} 42

投稿2019/02/25 09:23

kszk311

総合スコア3404

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

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

maakun

2019/02/25 09:34

では子要素の配置をpositionでしたい場合は、親はabsoluteでもrelativeでも大丈夫ということでしょうか? 先祖要素にrelativeが指定されてないという条件になるとは思うのですが。
kszk311

2019/02/25 09:49

はい。と言っても、relativeかabsoluteかの判断は、他のレイアウトにもよりますが…。 基本的にabsoluteで指定するときは、bodyを基準としない限り、親要素にrelative(またはabsolute)指定しないとおかしくなります。 2階層以上違う場合は、positionが指定されている一番近い親要素が基準となります。 答えになってなかったらすみません。
maakun

2019/02/25 10:14

ありがとうございます! 根本的に知りたかったことは親がabsoluteでも機能するのか、でしたので理解が深まってよかったです(^^)
guest

0

すみません、誤解した回答を載せていましたので一旦文章を削除します。

投稿2019/02/25 09:06

編集2019/02/25 10:02
yu-smc

総合スコア610

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問