상위 div에 상대적인 고정 하위 div

Question

상위 div 내에 하위 div sticky와 관련된 문제가 있습니다. 두 개의 하위 div가있는 상위 div. child2 높이가 부모 div의 높이를 초과합니다. 그래서 부모 div에 대한 스크롤을 추가했습니다. 이제 문제는 내가 child1을 sticky로 만들고 싶을 때입니다. child1을 sticky로 만들고이 div의 너비가 부모 div에서 나올 때입니다. child1은 부모 div 안에 들어가서 부모 div를 가로로 스크롤 할 수 있어야합니다.

.parent { 
    width:250px; 
    height:250px; 
    background-color:#CCCCCC; 
    position:relative; 
    overflow:scroll; 
} 

.child1 { 
    width:500px; 
    height:50px; 
    background-color:#4285F4; 
    position:fixed; 

} 
.child2 { 
    height:500px; 
    width: 600px; 

} 

<div class="parent"> 
    <div class="child1"></div> 
    <div class="child2"></div> 
</div> 

모든 도움을 주시면 감사하겠습니다.

업데이트 정확한 문제는 child2의 너비를 500px로 지정하면 가로로 스크롤 할 수 있다는 것입니다. 하지만 child1이 상위 div에서 벗어나고 내용이 표시됩니다.

Answer 1

왜 부모에게 맞는 너비로 정의 된 너비 1을 지정하면 고정 된 위치 지정을 계속 사용할 수 있습니까?

는 지원들에 대한 DEMO

Answer 2

감사를 참조하십시오. I는 다음 jQuery 코드를 추가하고 위치로서 자식 1을함으로써 문제 해결 : 절대

$(document).ready(function(){ 
    $(".parent").scroll(function(){ 
    console.log("scorled"); 
$(".child1").css("top", $(".parent").scrollTop() + "px"); 
}); 
});