CSS 위치 - 부분적으로 겹치는 div

Question

기본 CSS 레이아웃이 있습니다. DIV2는 150px 올라가고 부분적으로 DIV1과 겹칩니다. DIV2를 DIV2 바로 아래에 배치하는 데 문제가 있습니다. DIV2에서 DIV3과 같은 CSS를 적용 할 수는 있지만, 다른 div가 있기 때문에 찾고있는 것이 아닙니다. 다른 모든 div와 동일해야합니다. 위치를 재설정 할 수있는 것이 있어야합니다. 내가 분명히 설명하기를 바란다. DIV2의 높이는 유연해야합니다 (모바일).

비주얼 그래프 :

CSS DIV2 :

position: relative; 
top: -150px; 

HTML : 그것이 가장 좋은 방법을 고려하지 비록

<div class="div1"></div> 
<div class="div2"></div> 
<div class="div3"></div> 

Answer 1

사용 margin-top 대신 CSS에서 top 재산

margin-bottom: -150px

. 나머지 div는 div2 아래에 자동으로 따라갑니다.

그래도 작동하지 않는다면 코드의 작동 방식을 공유하십시오.

div { 
 
    width: 300px; 
 
    height: 150px; 
 
} 
 
.div1 { 
 
    background: red; 
 
} 
 
.div3 { 
 
    background: green; 
 
} 
 
.div2 { 
 
    margin: 0 auto; 
 
    margin-top: -50px; 
 
    background: yellow; 
 
    width: 150px; 
 
} 
 
.parent { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
}

<div class="parent"> 
 
    <div class="div1"></div> 
 
    <div class="div2"></div> 
 
    <div class="div3"></div> 
 
    <div class="div1"></div> 
 
    <div class="div3"></div> 
 
</div>

Answer 2

, 당신의 div2이 추가 :

.div1, 
 
.div2, 
 
.div3 { 
 
    height: 150px; 
 
} 
 

 
.div1 { 
 
    background: red; 
 
} 
 

 
.div2 { 
 
    background: blue; 
 
    position: relative; 
 
    top: -75px; 
 
    margin-bottom: -75px; 
 
} 
 

 
.div3 { 
 
    background: green; 
 
}

<div class="div1"></div> 
 
<div class="div2"></div> 
 
<div class="div3"></div>