절대 위치 요소는 왼쪽 또는 오른쪽 위치에 따라 다릅니다.

Question

절대 배치 된 div가 컨테이너 div 밖으로 나가는 지에 따라 절대 왼쪽 0px 또는 절대 오른쪽 0px를 어떻게 할당 할 수 있습니까?

내가보기에 쉬운 예는 다음과 같습니다. 브라우저에서 마우스 오른쪽 버튼을 클릭하면 클릭 한 위치의 오른쪽에 메뉴 위치가 표시되고 페이지 오른쪽으로 이동하지 않습니다. 페이지 외부로 나가면 여전히 내부에 머물러 있기 때문에 계속 볼 수 있습니다.

예 : (상자 위로 마우스) http://jsfiddle.net/ueSNQ/1/

Answer 1

"절대 위치가 지정된 div가 컨테이너 div 밖으로 나갈 것인가"에 따라 스크립트를 사용해야하는 것처럼 들리지만 IE는 CSS 표현을 지원하지만 크로스 브라우저 솔루션을 사용한 것 같습니다. 그것은이

function isOverflow(parent, child){ 
    var left = 0; 
    var op = child; 
    while(op && op != parent){ 
     left += op.offsetLeft; 
     op = op.offsetParent; 
    } 

    return ((left + child.offsetWidth) > parent.offsetWidth); 

} 

function getHoverHandler(parent, child){ 
    return function(){ 
     if(isOverflow(parent, child)){ 
      child.style.marginLeft = 'auto'; 
      child.style.right = '0px'; 
      child.style.left = ''; 
     } 
    } 
} 

function attach(o,e,f){ 
    if(o.addEventListener){ 
     o.addEventListener(e, f, false); 
    }else if(o.attachEvent){ 
     o.attachEvent('on'+e,f); 
    } 
} 

var yellowElement = document.getElementsByTagName('UL')[0]; 
var list= document.getElementsByTagName('LI'); 
for(var i = 0; i < list.length; i++){ 
    var element = list[i]; 
    var tip = element.getElementsByTagName('DIV')[0]; 
    attach(element, 'mouseover', getHoverHandler(yellowElement,tip)); 

} 

Answer 2

잘 첫번째의 모든 컨테이너 사업부는 position: absolute, right: 0px 또는 left: 0px이 컨테이너의 위치에 상대적으로 배치됩니다보다 설정 위치가있는 경우. 그렇지 않으면 위치가있는 원하는 div에서 트리를 올라가는 첫 번째 parentNode에 배치됩니다. 아무 것도 발견되지 않으면 위치가 body에 상대적입니다. 따라서 위치가 설정된 첫 번째 부모 또는 조부모 컨테이너를 검색 할 수 있습니다. 질문을 이해하기 어렵 기 때문에 몇 가지 예를 들려주고 싶다면 도와 드리겠습니다.

편집 : 당신이 exactley 내 댓글에서 같다 게시 된 예에서

는 부모의 offsethWidth과 왼쪽을 감소하거나 왼쪽으로 설정 삭제 경우의 offsetWidth +가 넘쳐되지 왼쪽을 계산 올바른 위치. 폭과 높이에 동일한 효과를주기 위해 모서리에 대해 몇 가지 사례를 만들어야합니다.

Answer 3

음을 친구처럼 뭔가 간단한 문제가 될 것이라고 말했다

, 다음 단계

1. You have a container div and on right clicking on it you will need to display a div for example say div with list of menus. 
2. Have the left position of the container div in a variable **contLeft** and width of the container in another variable **contWidth** 
3. Assign the oncontextmenu event handler on the container div. 
4. In the event handler function take the mouse x postion in a variable **mosX** and mouse y position in a variable **mosY** and you have to fix the top position of the div to be displayed as mosY and the left as mosX. 
5. In order to maintain the div within the container you have to calculate the container's screen occupation as **totPos = (contLeft + contWidth)** 
6. Calculate the screen occupation of the menu div as **posMenu = (mosX + width of the div)** 
7. If the totPos greater than or equal to posMenu display the menu in the same top and left postion using the values of mosY and mosX 
8. Else place the menu in position top = mosY and left = (mosX - width of menu div) 

이 문제를 해결할 희망을 봅니다.