Позицирование top, left

[Лёха]

Вот пример: http://www.wickham43.supanet.com/tutorial/divboxes.html
Под заголовком Divs with position: absolute; есть три дива.

Так вот, усли у родительского блока стоит position: relative; то все его дети (у которых позицирование absolute) $(".ewqf").offset().top будет указываться не с начала страницы, а с начала родительского блока. (на примере у дивов стоит top = 10px, 70px)

Так вот. У меня есть top от начала страницы, но если я применю его в детям, то они уедут фиг знает куда вниз.
Но у меня ситуация: родительский див может быть position: relative; а может быть и по умолчанию. Как мне поставить высоту, что бы они не уезжали вниз?

[Лёха]

Вопрос решен.
$(".selectors").position().top за это отвечает
(показывает top до родительского элемента)

Добавлено 10.02.11, 11:22

/**
 * Get the current coordinates of the first element in the set of matched
 * elements, relative to the closest positioned ancestor element that
 * matches the selector.
 * @param {Object} selector
 */
jQuery.fn.positionAncestor = function(selector) {
    var left = 0;
    var top = 0;
    this.each(function(index, element) {
        // check if current element has an ancestor matching a selector
        // and that ancestor is positioned
        var $ancestor = $(this).closest(selector);
        if ($ancestor.length && $ancestor.css("position") !== "static") {
            var $child = $(this);
            var childMarginEdgeLeft = $child.offset().left - parseInt($child.css("marginLeft"), 10);
            var childMarginEdgeTop = $child.offset().top - parseInt($child.css("marginTop"), 10);
            var ancestorPaddingEdgeLeft = $ancestor.offset().left + parseInt($ancestor.css("borderLeftWidth"), 10);
            var ancestorPaddingEdgeTop = $ancestor.offset().top + parseInt($ancestor.css("borderTopWidth"), 10);
            left = childMarginEdgeLeft - ancestorPaddingEdgeLeft;
            top = childMarginEdgeTop - ancestorPaddingEdgeTop;
            // we have found the ancestor and computed the position
            // stop iterating
            return false;
        }
    });
    return {
        left:    left,
        top:    top
    }
};

[Лёха]

fatalist, в JS он потому что был интересен вопрос без использования фримеворков.

[fatalist]

Дык это... не понял...
Вопрос-то решен? Я могу и обратно пнуть, мне не сложно... просто я даже упоминания о "чистом" не нашел...

Добавлено 10.02.11, 14:15

Цитата Лёха @ 10.02.11, 09:31

Но у меня ситуация: родительский див может быть position: relative; а может быть и по умолчанию. Как мне поставить высоту, что бы они не уезжали вниз?

Даже не знаю, что сказать... как правило я решаю в каждом конкретном случае...
Ну теоретически можно конечно проверять свойство position...

[Лёха]

Вон вверху код. Перебирать все родительские элементы, и если != static то это начало координат. Так и работает в Jquery ф-я position

Сообщение отредактировано: Лёха - 10.02.11, 14:20

[fatalist]

Дык, а зачем ты ее заново изобретал, если все-равно используешь jQuery?

[Лёха]

Я просто алгоритм рассказал

[fatalist]

Дык на чистом будет все тоже самое, только вместо
offset().top будет offsetTop (ну и left соответственно...)

Вообще это старая тема... мне еще Дядя Боб тогда помог с этим... Щас, может найду...

Добавлено 10.02.11, 14:49
Вот вариант с рекурсией:

function element_point(pElement) {
        if (!pElement || pElement == document.body || pElement == document.documentElement || pElement.style.position == 'static')
            return { x : 0, y : 0 };
        var ppt = element_point(pElement.offsetParent);
        return {
            x   : pElement.offsetLeft + ppt.x,
            y   : pElement.offsetTop + ppt.y
        };  
    }

ну и добавил условие с position

Добавлено 10.02.11, 14:49
Ну соответственно можно на цикл при желании переделать...

Сообщение отредактировано: fatalist - 10.02.11, 14:50

[Лёха]

В FAQ добавь

[fatalist]

Лёха

Цитата Лёха @ 10.02.11, 14:55

В FAQ добавь

Сделано