절대적으로 배치 된 요소를 스크롤링 부모의 바깥에 위치 시키려면 어떻게합니까?

Question

사용자가 마우스를 올려 놓고 풀 사이즈 이미지를 볼 수있는 작은 미리보기 이미지를 스크롤하는 div가 있습니다. 나는 더 큰 심상에 position: absolute;를 사용해서 이것을 달성했다.

이 방법은 미리보기의 첫 번째 줄에서는 제대로 작동하지만 두 번째 줄을보기 위해 아래로 스크롤하면 전체 크기 이미지가 페이지 아래쪽에 표시됩니다 (미리보기가 스크롤되기 전에 있었던 부분).

그러나 부모를 position: relative;으로 설정하면 이미지는 스크롤 div 안에 만 표시되므로 사용자는 한 번에 각 이미지의 섹션 만 볼 수 있으며 전체를 보려면 스크롤해야합니다.

HTML :

<div class="container"> 
    <div class="preview"> 
     <img class="big"> 
     <img class="small"> 
    </div> 
</div> 

그러나 preview div의 container 사업부 내부의 여러에

.

CSS : https://jsfiddle.net/jsd8t3gr/3/

내가 밖에서 떠있는 .big 이미지를 유지할 수 있습니다 어쨌든 거기 : 나는 .big 및 .small을 표현 대신 이미지의 색상 된 div를 사용하여, 여기에 바이올린을 가지고

.container { 
    width: 300px; 
    height: 120px; 
    overflow: auto; 
} 
.preview { 
    display: inline-block; 
} 
.small { 
    width: 100px; 
} 
.big { 
    display: none; 
    position: absolute; 
    z-index: 2; 
} 
.preview:hover .big { 
    display: block; 
} 

div와 같은 첫 번째 바이올린 예제 (상대 위치 지정 없음)와 비슷하지만 두 번째 바이올린 예제 (.container div의 상대 위치 지정)에서와 마찬가지로 컨테이너 div가 스크롤 될 때 이동해야합니까?

내가 지금까지 발견 한 모든 것은 부모가 범람하는 이미지를 멈추는 것과 관련이 있으며, 의도적으로 일어나는 일에 대해 아무 것도 발견하지 못했습니다.

EDIT - container div를 상대 위치로 설정하지 않고이 방법을 사용하면 Firefox에서 완벽하게 작동합니다. 브라우저 간 교차 작업을 수행하는 것일뿐입니다.

Answer 1

top을 big으로 정의하여 루트와 관련이 있도록 정의하십시오. top을 정의하지 않으면 기본적으로 부모를 기준으로합니다. 스크롤 할 때 Chrome에서 업데이트되지 않는 것 같습니다. 좋은 발견!

근무 바이올린 -에 대한 https://jsfiddle.net/jsd8t3gr/6/