부모 div에 상대적인 고정 위치

Question

브라우저 창의이 아닌 부모 div에 상대적인 요소의 위치 을 수정할 수 있습니까?

내가 가진 말 : 올바른 섹션은 페이지의 내용 중에

<div id="pagecontainer"> 

    <div id="linkspage"> 

     <div class="sidelinks"> 
      <a href="#page1" class="link">Link 1</a> 
      <p> 
      <a href="#page2" class="link">Link 2</a> 
      <p> 
      <a href="#page3" class="link">Link 3</a> 
      <p> 
      <a href="#page4" class="link">Link 4</a> 
      <p> 
     </div> 

     <div class="linkscontent"> 
      content of links page 
     </div> 

    </div> 

    //OTHER PAGES 

</div> 

는 기본적으로 두 개의 섹션 페이지가 왼쪽 섹션, 링크의 목록입니다. 콘텐츠를 스크롤 할 수있게하려면 #pagecontainer가 #pagecontainer로 고정되도록 링크를 유지해야하므로 #pagecontainer가 스크롤 될 때 스크롤되지 않지만 전체 브라우저 창을 스크롤하면 링크가 이동합니다.

나는 이미 JQuery "fixto"플러그인을 시도했습니다 : https://github.com/bbarakaci/fixto. 하지만 부모 요소 (#pagecontainer)의 알파가 0 일 때 내 페이지가 페이드 인/아웃되고 스크립트가 버그가 나기 때문에 부모 요소가 사라지고 수정할 곳이 없다고 생각하기 때문에 사용할 수 없습니다.

감사합니다.

Answer 1

은 다음과 같이 부모 position: relative 보내기

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 0; 
} 

이 DEMO를 참조하십시오.

Answer 2

나는 CodePen을 생성했습니다.

설명에서 반쯤입니다.

하지만 전체 브라우저 창을 스크롤하면 이동합니다.

당신은 iframe 또는 자바 스크립트 솔루션의 어떤 종류를 사용해야합니다.