JQuery css() behaviour

Question

Why these 2 instructions don't produce the same render please ?

$("#j_idt14\\:panelGrid label").css({
    "position": "absolute",
    "width": $("#j_idt14\\:panelGrid label").parent().outerWidth() - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-left")) - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-right")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-left-width")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-right-width")) -
        24 + "px"
});

and

$("#j_idt14\\:panelGrid label").css("position", "absolute");
$("#j_idt14\\:panelGrid label").css("width", 
    $("#j_idt14\\:panelGrid label").parent().outerWidth() - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-left")) - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-right")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-left-width")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-right-width")) -
        24 + "px");

in first case, width equals 500px and in 2nd case width equals 394px (as expected).

Thank you for clarification.

Answer 1

When the position isn't absolute, the j_idt14\\:panelGrid label element is included in the width calculation of the parent element. My guess is that the j_idt14\\:panelGrid label element is wider than the parent.

When the element's position gets set to absolute, its width is ignored in the calculation since it's no longer contained within the boundaries of the parent.