Question

如何指定绝对左侧0px或绝对右侧0px，具体取决于绝对定位的div是否超出其容器div。

我想我的意思是一个简单的例子：右键点击浏览器，看到它的菜单位置在你点击的右边，不要一直到页面的右边，而不是去在页面之外，它停留在页面内部，因此它仍然可见。

示例:(将鼠标悬停在框上） http://jsfiddle.net/ueSNQ/1/

Answer 1

听起来你需要使用脚本来处理“取决于绝对定位的div是否会超出其容器div”，IE支持css表达式，但你可能是在使用跨浏览器解决方案。< / p>

说它应该是这样的简单事情

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，如果没有找到它将相对于身体。因此，您可以搜索具有位置集的第一个父级或祖父级容器。这个问题很难理解，所以如果你想分享一些例子，我们很乐意提供帮助。

编辑：

在您发布的示例中，它与我的注释中的一样精确，计算父项的offsethWidth，并且offsetWidth + left如果向左减小或仅向左移除并设置正确的定位，则不会溢出。对于宽度和高度的相同效果，你必须为角落做一些情况。

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)

希望这可以解决您的问题。

绝对位置元素是左还是右，取决于它在哪里？

3 个答案: