絶対位置要素はどこにあるかによって左右どちらか？

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

さて最初の全てのコンテナのdivがposition: absolute, right: 0px又はleft: 0pxより設定位置はコンテナの位置に相対的に配置されている場合。そうでない場合は、位置を持つ目的のdivからツリーを上に移動する最初のparentNodeに配置されます。見つからない場合は、bodyに相対的になります。したがって、位置が設定されている最初の親または祖父母コンテナを検索できます。質問が分かりにくいので、いくつかの例を共有したいなら、私たちは助けてくれるとうれしいでしょう。

EDIT：あなたは私のコメントのように、親のoffsethWidthとoffsetWidth +は、それが左を減らすか、単に左とセットを削除された場合に溢れることがないように、左計算exactleyそれが掲示例で

正しい位置づけ。幅と高さに同じ効果がある場合は、コーナーのいくつかのケースを作成する必要があります。

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) 

これはあなたの問題を解決する希望をお試しください。