절대 위치가 지정된 div 안에 고정 위치 지정 div가 필요합니다.

Question

Snap.js 플러그인을 사용하고 있습니다 - (사이드 서랍/패널을 스크롤 할 수 있습니다).

3 개의 절대적으로 배치 된 div를 만드는 중 하나입니다. 그 중 하나에는 주 콘텐츠가 포함되어 있습니다.

div가 절대적으로 위치한 div 안에있을 때 창의 맨 위에 고정시키는 방법이 있습니까?

지금 막 고정 div가 브라우저의 상단이 아닌 절대적으로 위치가 지정된 div의 상단에 고정되어 있습니다. 스크롤 할 때 div는 주 콘텐츠 상단에 고정되어 있지만 창에는 고정되어 있지 않습니다. 예를 들어

: 내가 스크롤 오프셋을 추적하고 수동으로 성능에 적합하지 않은 자식 DIV, 상단의 위치를 ​​조정하기 위해 자바 스크립트를 사용하고 순간

<div style="position:absolute;"> 

    <div style="position:fixed;top:0"> 
     <!-- some content which needs to be pinned to top of window --> 
    </div> 

</div> 

.

도움을 주셨습니다.

Answer 1

참조 - 인터넷 익스플로러에서 어떤 아이디어를 스크롤 할 때 불안.

<div id="displayed-content" class="snap-content scrollable"> 
    <div><!-- regular content --></div> 
     <div><!-- fixed content --></div> 
    <div><!-- footer content --></div> 
</div> 

http://jsfiddle.net/bxRVT/

Answer 2

난 당신이 뭘 하려는지에 대해 조금 추측하고 있지만, 이런 식으로 뭔가를 찾고 될 수 있습니다

<div class="local-wrap"> 
    <div class="fixed"> 
     Some content which needs to be pinned to top of window 
    </div> 
    <div class="port"> 
     Regular content... 
    </div> 
</div> 

다음과 같은 CSS 적용

.local-wrap { 
    position: relative; 
} 
.local-wrap .fixed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: lightgray; 
    width: 100%; 
    height: 5.00em; 
} 
.local-wrap .port { 
    position: relative; 
    top: 5.00em; 
    min-height: 10em; 
    height: 15em; 
    overflow: auto; 
    border: 1px solid gray; 
    border-width: 0 1px 1px 1px; 
} 

데모 바이올린 : http://jsfiddle.net/audetwebdesign/pTJbW/

기본적으로 블록 요소에 대해 고정 블록을 얻으려면 절대 위치 지정을 사용해야합니다. 고정 위치는 항상 루트 요소 또는 뷰 포트를 기준으로하므로 position: fixed은 도움이되지 않습니다.

내가 수행 한 작업은 두 개의 하위 블록이있는 .local-wrap 컨테이너를 정의하는 것입니다. 하나는 이고, 다른 하나는 정상적인 흐름 인 .local-wrap의 위쪽에 배치되었습니다. position: relative을 사용하여 .fixed 아래에 위치 시켰지만 위쪽 여백도 사용했습니다.

로컬 창/포트 내에서 스크롤되는 내용을 보여주기 위해 일부 높이를 수정했지만 디자인 및 응용 프로그램에 따라 변경 될 수 있습니다. 고려해야 할 다른 고려 사항이 될 수 있도록

면책 조항

나는 snap.js에 익숙하지 않다. 만약 div.transformed를 호출하는이 요소에 변환을 적용하는 경우 CSS3에

코멘트의 CSS3 사양에 따르면

변환 소자와 고정 후 div.transformed 새로운 적층 컨텍스트를 생성하고 함유 역할 고정 된 위치의 하위 요소가 포함 된 블록을 차단합니다. 따라서 시나리오에서는 고정 된 위치 컨텍스트가 창 상단에 머물러 있지 않습니다. 참고로

, 나는 내 자바 스크립트 해결 방법을 보여주는 바이올린을했습니다 Mozilla Developer Network -> CSS Reference -> Transform