tags:

views:

23

answers:

0

I have a strange jQuery.offset() problem.

I'm building a website which makes use of layers, built with div's with a z-index. The links on the lower levels are not selectable, because a layer with a higher z-index is positioned on top. They are visible, because the upper layer is mostly transparent and empty.

My solution is to iterate over all links (all A elements), grab their location (top, left, height and width values) and href, and create a new A element at the same position, placed in the upper layer.

The problem: this method works for three out of four links. In one case, the new element is located about 120px off to the top, but the size and offset to the left are fine.

How can I debug on the reason why just that one element is positioned wrong?

$("#container A").each(function(index){
    var top = $(this).offset().top;
    var left = $(this).offset().left;
    var width = $(this).width();
    var height = $(this).height();  
    var href = $(this).attr("href");

    $('<A id="layer'+index+'"></A>').addClass("overlayer").css("left", left).css("top", top).css("width", width).attr("href", href).css("height", height).appendTo('#toplayer');
}

Note: #container is the lower layer with all links, #toplayer is the the upper layer.

The CSS class for .overlayer:

.overlayer {
    background-color: #cc00cc;
    position: absolute;
    z-index: 10;
    cursor: hand;
}