고정 요소와 절대 요소를 포함하는 블록을 수직으로 이동하는 방법

Question

모든 내용은 JsFiddle에 있습니다. div .global-wrapper 위/아래로 이동할 수 있기를 바랍니다. 두 컨테이너에서 fixed 및 absolute 위치를 사용하여 다양한 조합을 설정하려고했지만 전환하는 동안 포함 된 요소를 구조화하지 않으면 작업을 수행 할 수 없습니다.

해결책은 자바 스크립트를 사용하여/아래로 3 개 요소 .top.middle 및 .bottom을 이동할 수 있었다,하지만 난 그것이 가능하다면는 "단일 프로세스"에서 그들을 이동하는 것을 선호합니다.

HTML

<div class="global-wrapper"> 
    <div class="global-container"> 
     <div class="top">TOP</div> 
     <div class="middle"> 
      <div class="content">MIDDLE</div> 
     </div> 
     <div class="bottom">BOTTOM</div> 
    </div> 
</div> 

CSS

.global-wrapper { height: 500px; width: 700px; position: absolute; top: 0%; } 
.global-wrapper .global-container { height: 100%; width: 100%; position: fixed; } 
.global-wrapper .global-container .top { height: 20%; width: 100%; background-color:blue; position: fixed; top: 0px; } 
.global-wrapper .global-container .middle { height: 60%; width: 500%; overflow: hidden; background-color:green; position: absolute; top: 20%; } 
.global-wrapper .global-container .middle .content { height: 100%; width: 100%; position relative; } 
.global-wrapper .global-container .bottom { height: 20%; width: 100%; background-color:blue; position: fixed; bottom: 0%; } 

업데이트 :

이 구조는에 사실이 네비게이션 바있는 간단한 페이지 (하나, 약간의 설명을받을 권리가 위쪽과 아래쪽) 고정 된 자세로 (중간에 슬라이드가 있기 때문에 부모보다 더 큰 이유는 .middle div입니다).

전체 구조를 위아래로 움직일 수 있기를 원합니다 (버튼을 클릭 할 때 여기서는 중요하지 않습니다). 창 뒤에 부분을 숨기려면 (예를 들어, 내가 설정 한 경우) top: -15%을 .global-wrapper div으로 변경하면 전체 구조가 상위 브라우저 창 뒤에 15 %가 표시 될 것으로 예상됩니다.

Answer 1

난 당신이 이런 식으로 뭔가를 찾고 같은데요 :

Working Example

.global-wrapper .global-container:hover { 
    transform:translatey(-150%); 
    transition: all 3s; 
} 
.global-wrapper .global-container { 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    transition: all 3s; 
} 

Answer 2

다른 클래스와 자신이 모순됩니다. 고정 클래스는 고정 클래스입니다. 두 번째로 콘텐츠 div에서 모든 위치를 제거하고 부모 컨테이너 만 사용하는 것이 좋습니다.

고정 된 div의 부모 div를 변경하면 고정 된 컨테이너가 움직이지 않을 수 있습니다. 녹색 가운데 div가 움직이는 것을 볼 수 있습니다. 이것은 고정 위치를 가지고 있지 않습니다.

도움이 되었기를 바랍니다.