CSS : 중첩 된 요소를 상위 요소의 경계 바깥쪽에 위치 시키십시오.

Question

두 div가 있는데, 하나는 서로 중첩되어 있습니다. 페이지 디자인에 따르면 중첩 된 div는 this image에서와 같이 부모 div의 상단에 있어야합니다.

원하는 효과를 시뮬레이트하기 위해 중첩 된 div의 음부 상단 여백을 사용하여 두 요소에 대해 코딩 된 CSS가 있습니다. 그러나 상위 경계 외부에 나타나는 대신 this image처럼 중첩 된 div의 상위 10 픽셀 정도가 잘립니다.

이 페이지의 목표는 반응 적이기 때문에 요소를 절대적으로 배치하지 않으려합니다. div에 대한

HTML : div의에 대한

이

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

CSS : 당신은 중첩 된 div에 position:absolute을 적용 할 필요가 없습니다

.container-div { 
    padding: 10px 10px 0; 
} 

.child-div { 
    display: inline-block; 
    width: 100px; 
    height: 60px; 
    margin: -15px 10px 0; 
    border: 1px solid #efefef; 
    background-color: #fff; 
} 

Answer 1

.

그리고이 경우에는 margin이 아마도 최선의 방법은 아닙니다.

position:relative을 중첩 된 div에 추가하고 원하는 번호로 top을 설정하면됩니다. 당신의 경우에, 그것은 아마도 부정적 일 것입니다.

체크 아웃 this Fiddle. 부모에

Answer 2

overflow: hidden은 완벽하게했을 것!