작은 화면에서 부모 요소 위의 자식 요소

Question

2 개의 div가 있는데, 하나는 서로 중첩됩니다. 페이지 디자인에 따르면, 중첩 된 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

사용 내부 - 부모와 인 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>

보다 작은 640 낮은 사업부로 사용 .inner-parent과 그것을 배경 색상 일치입니다함으로써 640 픽셀보다 큰 진짜 부모를 사용하는 경우. 순서를 수정하려면 column-reverse에서 column으로 전환하거나 order을 사용하여 하위 div 중 하나의 순서 만 변경하면됩니다.