小画面上の親要素の上にある子要素

Question

2つのdivがあり、1つはもう一方の内部に入れ子になっています。ページのデザインによると、ネストされたdivが、大画面で、親の内部で正常に表示される必要があるas in this image.

しかし、小さな画面上で、ネストされたdivが親のdivの上のように見える必要があり、as in this image.

子要素を絶対的に配置したくないのは、特に応答性の高いページの場合、非常に貧弱で柔軟性のない選択肢なのでです。

のdivのためのdiv/CSSのためのHTML（唯一の大画面で）：

.container-div { 
 
    background-size: 100% auto; 
 
    margin-bottom: 20px; 
 
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); 
 
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); 
 
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); 
 
} 
 

 
.child-div { 
 
    position: absolute; 
 
    border: 3px solid white; 
 
    width: 400px; 
 
    height: 200px; 
 
    margin-bottom: 10px; 
 
    margin-right: 10px; 
 
    bottom: 0; 
 
}

<div class="container-div"> 
 
    <div class="child-div"> 
 
    ... 
 
    </div> 
 
</div>

Answer 1

インナー親とフレキシボックスを使用してください。

.parent { 
 
    display: flex; 
 
    flex-flow: column-reverse; 
 
} 
 

 
.inner-parent { 
 
    background: red; 
 
} 
 

 
.child { 
 
    background: blue; 
 
} 
 

 
@media screen and (min-width: 640px) { 
 
    .parent { 
 
     flex-flow: column; 
 
     background: red; 
 
    } 
 
} 
 

 

 
/* Reset and basic styles */ 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.parent { 
 
    align-items: center; 
 
    width: 200px; 
 
} 
 

 
.inner-parent { 
 
    height: 50px; 
 
    width: 100%; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
.child { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin-bottom: 20px; 
 
    height: 50px; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="inner-parent">PARENT</div> 
 
    <div class="child">CHILD</div> 
 
</div>

すると下のdivとして640ピクセル幅の使用.inner-parentよりも小さいと640ピクセル幅より大きいときには、背景色の一致だことによって、本当の親を使用します。注文を修正するには、column-reverseからcolumnに切り替えるか、orderを使用して子divの1つのみの順序を変更してください。