Kindelement über dem Elternelement auf einem kleinen Bildschirm

Question

Ich habe 2 divs, eines im anderen verschachtelt. Nach dem Seitendesign, muss die verschachtelte div innerhalb seiner Eltern erscheinen normalerweise auf einem großen Bildschirm, as in this image.

Aber auf einem kleinen Bildschirm, die verschachtelte div über dem Elternteil div erscheinen muss sein, as in this image.

Ich möchte das Kindelement nicht unbedingt positionieren, weil es eine sehr schlechte und unflexible Wahl ist, besonders für eine responsive Seite.

HTML für divs/CSS für divs (auf einem großen Bildschirm nur):

.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

Verwenden Sie ein inner Eltern und Flexbox.

.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>

Wenn kleiner als 640px Verwendung .inner-parent als untere div und verwendet, um die real Eltern, wenn größer als 640px von seinem Spiel Hintergrundfarbe zu machen. Um den Auftrag zu korrigieren, wechseln Sie einfach von column-reverse zu column oder verwenden Sie einfach order, um die Reihenfolge nur eines der untergeordneten divs zu ändern.