위치 지정 : 절대 div 스크롤 일반적으로 다른 스크롤 가능 div 내에서

Question

position:fixed을 사용하여 모든 페이지 요소 위에 스크롤 할 수있는 고정 높이가 있습니다. <div id="overlay">. div에 고정 된 높이보다 높은 요소가 있으므로 스크롤 막대가 나타납니다. 스크롤 한 경우에도 단락과 함께 머물고 싶다는 툴팁이 있습니다. 내가 여기서 일하기를 원하지만 불행히도 내 솔루션 중 어느 것도 제대로 작동 무엇

: http://jsfiddle.net/4qTke/

:

1. 내가 툴팁에 position:absolute를 추가하고 position:relative (툴팁의 부모) #overlay에 도구 설명이 예상대로 스크롤되지만 #overlay 외부에 표시되지 않습니다.

2. 난 단지 툴팁에 position:absolute을 추가 http://jsfiddle.net/Yp6Wf/

   툴팁 부모 #overlay 외부에서 볼 수 있지만 DIV 스크롤 할 때 이동하지 않습니다.

나는 툴팁 항상 스크롤 할 때 이동하기에 및 볼 수 있도록합니다.

Answer 1

.

가장 큰 문제는 #tooltip이 상대적인 컨테이너에 overflow: scroll을 설정했기 때문입니다. 이 오버플로 속성은 #tooltip이 div의 "바깥 쪽"이라고 표시 될 때 모든 내용이 가장자리 바깥 쪽에서 나타나지 않도록하기 때문에 숨겨지며 스크롤 할 때만 표시됩니다.

두 번째 시나리오에서 볼 수있는 이유는 position:relative을 설정하지 않으면 #tooltip이 페이지가 아닌 컨테이너와 관련이 있기 때문입니다. 즉, 컨테이너의 속성 인 overflow:scroll의 영향을받지 않습니다.

Answer 2

HTML :

<div id="overlay"> 

    <div class="elemRel"> 

     <div class="elemAbs"> 

      <!-- Your Code --> 

     </div> 

    </div> 

</div> 

CSS : 당신이 원하는 것은 단지 CSS와 HTML을 사용하여 수 없습니다

#overlay { position:fixed; } 
.elemRel { position:relative; } 
.elemAbs { position:absolute; } 

Answer 3

어쩌면 이것이 대안 일 수 있습니까? demo fiddle을 참조하십시오.