Абсолютная позиция элемента влево или вправо в зависимости от того, где он находится?

Question

Как я могу назначить абсолютный левый 0px ИЛИ абсолютный правый 0px в зависимости от того, выйдет ли абсолютный позиционный div за пределы его контейнера div.

Полагаю, простой пример того, что я имею в виду: щелкните правой кнопкой мыши в своем браузере и увидите, что он находится в том же положении меню справа от того места, где вы нажимаете. за пределами страницы он остается внутри, поэтому он все еще виден.

пример: (Наведите курсор на прямоугольники) 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

Ну, друг, Попробуйте следующие шаги

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)

Надеюсь, это решит вашу проблему.

Answer 3

Ну, прежде всего, если контейнерный элемент div имеет позицию, установленную чем position: absolute, right: 0px или left: 0px будет позиционироваться относительно позиции контейнера. В противном случае он будет расположен на первом родительском узле, идущем вверх по дереву от желаемого div, который имеет позицию, если ничего не найдено, он будет относительно тела. Таким образом, вы можете искать первый родительский или родительский контейнер, в котором установлена ​​позиция. Этот вопрос трудно понять, поэтому, если вы хотите поделиться некоторыми примерами, мы будем рады помочь.

EDIT:

В примере, который вы разместили, все точно так же, как в моем комментарии, вычислите offsethWidth родительского элемента и offsetWidth + left, чтобы не переполнять его, если уменьшите влево или просто удалите left и установите правильное расположение. Для того же эффекта на ширину и высоту вы должны сделать несколько случаев для углов.