親要素に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を基準に動いてます。
これはどういった動きなのでしょうか?
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/25 09:34
2019/02/25 09:49
2019/02/25 10:14