jQuery: offset issues

I have a strange jQuery.offset() problem.

Components are being layered and taking away the functionality of the l开发者_开发知识库inks underneath. The upper layer is 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.

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. Any ideas on the last one?

$("#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;
}

If browser support for pointer-events: none is good enough for you, you could use that for your upper covering layer instead of JS hacks.

Some older IEs that don't support it have a "feature" that you can click through boxes without a background that you maybe could use.