<p>
        In CSS, elements are positioned using
        offsets. The measurement used is the amount of offset from the top-left corner of an element’s parent.
        </p>

        <p>offsetParent: Theoretically, this is the parent that an element is positioned within. However,
        in practice, the element that offsetParent refers to depends on the browser (for
        example, in Firefox it refers to the root node, and in Opera, the immediate parent). </p>

        <p>
        offsetLeft and offsetTop: These parameters are the horizontal and vertical offsets of the
        element within the context of the offsetParent. Thankfully, this is always accurate in
        modern browsers.
        </p>

        <p>
        Two Helper Functions for Determining the x and y Locations of an Element Relative
        to the Entire Document
        </p>

        <pre data-sub="prettyprint:_">
        // Find the X (Horizontal, Left) position of an element
        function pageX(elem)
        {
        // See if we're at the root element, or not
        return elem.offsetParent ?
        // If we can still go up, add the current offset and recurse upwards
        elem.offsetLeft + pageX( elem.offsetParent ) :
        // Otherwise, just get the current offset
        elem.offsetLeft;
        }

        // Find the Y (Vertical, Top) position of an element
        function pageY(elem)
        {
        // See if we're at the root element, or not
        return elem.offsetParent ?
        // If we can still go up, add the current offset and recurse upwards
        elem.offsetTop + pageY( elem.offsetParent ) :
        // Otherwise, just get the current offset
        elem.offsetTop;
        }
        </pre>


        <p>
        Two Functions for Determining the Position of an Element Relative to Its
        Parent Element. (parent element is not necessary its offsetParent)
        </p>


        <pre data-sub="prettyprint:_">
        // Find the horizontal positioing of an element within its parent
        function parentX(elem) {
        // If the offsetParent is the element's parent, break early
        return elem.parentNode == elem.offsetParent ?
        elem.offsetLeft :
        // Otherwise, we need to find the position relative to the entire
        // page for both elements, and find the difference
        pageX( elem ) - pageX( elem.parentNode );
        }

        // Find the vertical positioning of an element within its parent
        function parentY(elem) {
        // If the offsetParent is the element's parent, break early
        return elem.parentNode == elem.offsetParent ?
        elem.offsetTop :
        // Otherwise, we need to find the position relative to the entire
        // page for both elements, and find the difference
        pageY( elem ) - pageY( elem.parentNode );
        }
        </pre>


        <p>
        Helper Functions for Finding the CSS Positioning of an Element
        </p>


        <pre data-sub="prettyprint:_">
        // Find the left position of an element
        function posX(elem) {
        // Get the computed style and get the number out of the value
        return parseInt( getStyle( elem, "left" ) );
        }

        // Find the top position of an element
        function posY(elem) {
        // Get the computed style and get the number out of the value
        return parseInt( getStyle( elem, "top" ) );
        }
        </pre>

        <p>
        A Pair of Functions for Setting the x and y Positions of an Element, Regardless of
        Its Current Position
        </p>

        <pre data-sub="prettyprint:_">
        // A function for setting the horizontal position of an element
        function setX(elem, pos) {
        // Set the 'left' CSS property, using pixel units
        elem.style.left = pos + "px";
        }

        // A function for setting the vertical position of an element
        function setY(elem, pos) {
        // Set the 'left' CSS property, using pixel units
        elem.style.top = pos + "px";
        }
        </pre>


        <p>A Pair of Functions for Adjusting the Position of an Element Relative to Its
        Current Position</p>

        <pre data-sub="prettyprint:_">
        // A function for adding a number of pixels to the horizontal
        // position of an element
        function addX(elem,pos) {
        // Get the current horz. position and add the offset to it.
        setX( posX(elem) + pos );
        }

        // A function that can be used to add a number of pixels to the
        // vertical position of an element
        function addY(elem,pos) {
        // Get the current vertical position and add the offset to it
        setY( posY(elem) + pos );
        }
        </pre>


        <p>Two Functions for Retreiving the Current Height or Width of a DOM Element</p>

        <pre data-sub="prettyprint:_">
        // Get the actual height (using the computed CSS) of an element
        function getHeight( elem ) {
        // Gets the computed CSS value and parses out a usable number
        return parseInt( getStyle( elem, 'height' ) );
        }

        // Get the actual width (using the computed CSS) of an element
        function getWidth( elem ) {
        // Gets the computed CSS value and parses out a usable number
        return parseInt( getStyle( elem, 'width' ) );
        }
        </pre>


        <p>Two Functions for Finding the Full Potential Height or Width of an Element,
        Even If the Element Is Hidden</p>


        <pre data-sub="prettyprint:_">
        // Find the full, possible, height of an element (not the actual,
        // current, height)
        function fullHeight( elem ) {
        // If the element is being displayed, then offsetHeight
        // should do the trick, barring that, getHeight() will work
        if ( getStyle( elem, "display" ) != "none" )
        return elem.offsetHeight || getHeight( elem );

        // Otherwise, we have to deal with an element with a display
        // of none, so we need to reset its CSS properties to get a more
        // accurate reading
        var old = resetCSS( elem, {
        display: "",
        visibility: "hidden",
        position: "absolute"
        });

        // Figure out what the full height of the element is, using clientHeight
        // and if that doesn"t work, use getHeight
        var h = elem.clientHeight || getHeight( elem );

        // Finally, restore the CSS properties back to what they were
        restoreCSS( elem, old );

        // and return the full height of the element
        return h;
        }

        // Find the full, possible, width of an element (not the actual,
        // current, width)
        function fullWidth( elem ) {
        // If the element is being displayed, then offsetWidth
        // should do the trick, barring that, getWidth() will work
        if ( getStyle( elem, "display" ) != "none" )
        return elem.offsetWidth || getWidth( elem );

        // Otherwise, we have to deal with an element with a display
        // of none, so we need to reset its CSS properties to get a more
        // accurate reading
        var old = resetCSS( elem, {
        display: "",
        visibility: "hidden",
        position: "absolute"
        });

        // Figure out what the full width of the element is, using clientWidth
        // and if that doesn"t work, use getWidth
        var w = elem.clientWidth || getWidth( elem );

        // Finally, restore the CSS properties back to what they were
        restoreCSS( elem, old );

        // and return the full width of the element
        return w;
        }

        // A function used for setting a set of CSS properties, which
        // can then be restored back again later
        function resetCSS( elem, prop ) {
        var old = {};

        // Go through each of the properties
        for ( var i in prop ) {
        // Remember the old property value
        old[ i ] = elem.style[ i ];

        // And set the new value
        elem.style[ i ] = prop[i];
        }

        // Retun the set of changed values, to be used by restoreCSS
        return old;
        }

        // A function for restoring the side effects of the resetCSS function
        function restoreCSS( elem, prop ) {
        // Reset all the properties back to their original values
        for ( var i in prop )
        elem.style[ i ] = prop[ i ];
        }

        </pre>


        <p>
        A Set of Functions for Toggling the Visibility of an Element Using Its CSS
        Display Property.</p>


        <pre data-sub="prettyprint:_">
        // A function for hiding (using display) an element
        function hide( elem ) {
        // Find out what it"s current display state is
        var curDisplay = getStyle( elem, "display" );

        //  Remember its display state for later
        if ( curDisplay != "none" )
        elem.$oldDisplay = curDisplay;

        // Set the display to none (hiding the element)
        elem.style.display = "none";
        }

        // A function for showing (using display) an element
        function show( elem ) {
        // Set the display property back to what it use to be, or use
        // "block", if no previous display had been saved
        elem.style.display = elem.$oldDisplay || "block";
        }
        </pre>


        <p>A Function for Adjusting the Opacity Level of an Element.</p>


        <pre data-sub="prettyprint:_">
        // Set an opacity level for an element
        // (where level is a number 0-100)
        function setOpacity( elem, level ) {
        // If filters exist, then this is IE, so set the Alpha filter
        if ( elem.filters )
        elem.filters.alpha.opacity = level;

        // Otherwise use the W3C opacity property
        else
        elem.style.opacity = level / 100;
        }



        </pre>