CSS를 사용하여 중첩 된 요소를 화면 가장자리까지 설정하는 방법

Question

두 개의 중첩 된 div가 있는데, 하나는 화면 오른쪽에 아리아를 정의하고 다른 하나는 그 100 %입니다. 자식 div를 오른쪽 대신 화면 왼쪽에 애니메이션으로 표시하려고합니다. 부모 div에 애니메이션을 적용 할 수 없습니다. 다른 자식이 있기 때문에 새 css3 vw 단위를 사용하여 시도했지만 값을 음수 단위로 설정하여 왼쪽으로 이동해야합니다. 나는이 요소 옆에있는 요소의 크기를 가져 와서 그 양을 음수로 지정함으로써 작업 할 수있게되었지만 일단 창 크기를 조정하면 위치가 벗어납니다.

내 CSS는 다음과 같습니다 다른 해결책이없는 경우

#sideParent 
{ 
    position: absolute; 
    top: 150px; 
    bottom: 0px; 
    right: 0px; 
    width: 300px; 
    border-top: 3px solid black; 
    border-left: 3px solid black; 
    text-align: center; 
} 
#sideChild 
{ 
    position: absolute; 
    top: 0px; 
    left: 0px; /* I need this to position to left of screen with a static value */ 
    right: 0px; 
    height: 100%; 
    width: 100%; 
    background-color: white; 
    z-index: 100; 
    border-right: 3px solid black; 
} 

이 화면이 때 다시 크기를 확인하고 그에 따라 음의 값을 변경할 수있는 방법이 있어야합니다. 아무도 초기 문제에 대한 해결책을 제시 할 수 없다면 누군가이 방법을 설명해 주시겠습니까? 사전에

감사합니다.

Answer 1

먼저 부모가 화면의 전체 너비를 만들어야합니다. 그런 다음 한 번에 하나씩 어린이를 애니메이션으로 만들 수 있습니다.

이

How to make a <div> always full screen?

변화 당신의 부모 DIV의 CSS는 :

#sideParent 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

그런 다음 당신은 그냥 부모 사업부가 있는지 확인 left: 0

에 right: 0에서 자식 DIV 애니메이션을 적용 할 수 있습니다이 질문을 확인 body 요소의 첫 번째 자식이며, 이것은 매력처럼 작동해야합니다.

Answer 2

#sideParent를 화면 왼쪽으로 이동하려면 jquery를 사용해야합니다. 화면 가장자리에 표시하려면 다음 코드를 필요로합니다. 내부 부모 요소가 부모 부모의 가장자리에 있기를 원한다면 "position()"대신 "offset()"을 사용해야합니다. 이는 프로젝트에 따라 다르지만 그것은 당신에게 달려 있습니다.

var $mainDiv = $('#sideParent'); 
var $sideChild = $mainDiv.children('#sideChild'); 
var leftOffset = $mainDiv.position().left; 

$mainDiv.hover(
    function(){ 
     $sideChild.css('left', '-' + leftOffset + 'px'); 
    }, 
    function(){ 
     $sideChild.css('left', '0px'); 
    } 

); 

그리고 단지 부모의 왼쪽에있는 내부 사업부 전체 폭을 이동하는 것입니다 당신이 원하는,이

jsfiddle Demo - Move to the edge of parent

#sideParent { 
     position: absolute; 
     top: 150px; 
     bottom: 0px; 
     right: 0px; 
     width: 300px; 
     border-top: 3px solid black; 
     border-left: 3px solid black; 
     text-align: center; 
     background-color:red; 
    } 
    #sideChild { 
     position: absolute; 
     top: 0px; 
     left: 0; 
     right: 0px; 
     height: 100%; 
     width: 100%; 
     background-color: blue; 
     z-index: 100; 
     border-right: 3px solid black; 
     transition: all 2s; 
     -webkit-transition: all 2s; /* Safari */ 
    } 
    #sideParent:hover #sideChild{ 
     /* Taking borders into account with calc, if not necessary only use 100%*/ 
     left: calc(-100% - 6px); 
    } 

처럼 할 수있는 경우에

jsfiddle Demo - Move to the edge of screen