Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

Making Element Position Absolute with jQuery


One of the things that I keep running into in library code I create is that I deal with a lot of elements that are floating/dragging or otherwise being moved around the document as free floating elements. jQuery.ui includes a dead simple Draggable plug-in that handles this easily, but in some situations the draggable plug-in is overkill when I simply need to pop up a dialog on the page on top of other content.

One recurring theme for any of these scenarios is that I have to reliably turn an element into absolute positioning and while sometimes it’s as easy as doing $(this).css("position","absolute"); at other times doing this is not enough as the element will ‘jump around’ on the page into another position as it’s popped out of its document containership hierarchy.

After doing this enough times manually and often forgetting one or another setting I added a small plug-in that does it for me now:

$.fn.makeAbsolute = function(rebase) {
    return this.each(function() {
        var el = $(this);
        var pos = el.position();
        el.css({ position: "absolute",
            marginLeft: 0, marginTop: 0,
            top: pos.top, left: pos.left });
        if (rebase)
            el.remove().appendTo("body");
    });
}

If you’re new to jQuery, a plug-in basically extends the jQuery.fn object with a new function that becomes part of the jQuery matched set. The function can be called just like any other jQuery function that operates on the matched set of elements. The function is called in the context of the matched set object – so this is the jQuery instance of all the matched elements. Note that use return this.each() {} to iterate of each of the matched items and return the matched set as a result of the call. This ensures that this function can be used in the call chain of jQuery commands against the matched set and further functions can be called after it.

The plug-in code makes the element absolutely positioned as well as removing margins and explicitly forcing the top and left properties to be set. Removing the margin ensures you don’t get any funky bumping of content that is effectively  out of the flow of the document – an important aspect if you’re moving things around say with drag operations or else you end up with really odd offsets. Setting top and left shouldn’t be necessary usually but in some situations where elements are nested deeply inside of other elements the default position will cause elements to be thrown into unexpected page positions. jQuery’s position() function looks at a variety of properties for placement of elements and generally reliable in getting the correct location and explicitly assigning it.

The rebase parameter when set causes the element to be removed from its current document position and instead be attached to the body element. This can be useful in some instances where elements are deeply nested when the container positioning and margins can cause erratic behavior for positioning. For example, I just ran into a situation with an element that was loaded inside of a <fieldset> element and no matter what I tried the absolute position – and the event object offsets that mouse events caused where completely off. Rebasing to the body of the document made this same element work just fine. This option should be avoided if possible as it causes the element to be basically cloned which means any references to the old element become invalid. Rebasing can also cause problems with CSS Selectors both for CSS or jQuery if the element depends on the document hierarchy to be found.

It’s useful – just gone through my library routines and remove about 10 instances where similar code was in use and replaced with this. Maybe some of you may find this useful or give you some ideas on how to get elements absolutely positioned.

Make Donation
Posted in jQuery  


Feedback for this Post

 
# re: Making Element Position Absolute with jQuery
by William Kapke October 21, 2008 @ 5:17pm
Very cool. At minimum, this has was helpful in that I had one of those 'hit my forehead' moments when I realized that I could just be giving an object to .css() rather than calling it once for each property... DUH! (yep, I've only been using Jquery for a few weeks)

..sometimes I skim over the wrong things. Sigh. :)

THanks!
# re: Making Element Position Absolute with jQuery
by Jason October 22, 2008 @ 12:24pm
Instead of:

top: pos.left, left: pos.left

did you mean:

top: pos.top, left: pos.left // pos.TOP
# re: Making Element Position Absolute with jQuery
by Rick Strahl October 22, 2008 @ 1:03pm
@Jason, fat fingers. Thanks fixed. Not sure how that happened. I must have made some manual changes last night as I was posting this because the code in my source files has the right setup. Odd.

Fixed in the article above.
# Making Element Position Absolute with jQuery
by DotNetKicks.com October 26, 2008 @ 1:12pm
You've been kicked (a good thing) - Trackback from DotNetKicks.com
# re: Making Element Position Absolute with jQuery
by David Fauber October 28, 2008 @ 9:02am
I'm pretty sure the Dimensions plugin offers similar functionality as well.

Keep up the good work, enjoy the jq stuff.
# re: Making Element Position Absolute with jQuery
by Robert Brewer February 26, 2009 @ 7:34pm
Thanks! If you're going to set marginTop/Left, you should probably subtract any existing values:

               top: pos.top - this.style.marginTop,
               left: pos.left - this.style.marginLeft,
               marginTop: 0, marginLeft: 0
# re: Making Element Position Absolute with jQuery
by Johnny August 12, 2010 @ 9:15am
The code was great. I really liked the word 'containership' too, lol.
# re: Making Element Position Absolute with jQuery
by jay January 13, 2011 @ 3:09am
how can i get or set the div position(left,right,top,bottom) using jquery?
# re: Making Element Position Absolute with jQuery
by Rick Strahl January 13, 2011 @ 3:31pm
@jay - use .css({ left: x, top: y, bottom: bott, right: right });
# re: Making Element Position Absolute with jQuery
by Steve September 01, 2011 @ 8:44pm
Awesome! I was battling this exact thing where the div would jump around as it was being repositioned. This (explicitly setting the top, left via CSS) did the trick! You da man Rick. Thanks.
# re: Making Element Position Absolute with jQuery
by Marco September 23, 2011 @ 5:30am
I'm not sure calling remove() is needed: appendTo() should already remove it beforehand.
# re: Making Element Position Absolute with jQuery
by john September 29, 2013 @ 9:16pm
How do you actually implement this on something? I am new and would like to use this code
# re: Making Element Position Absolute with jQuery
by Rick Strahl September 30, 2013 @ 2:30am
@John - it's a jQuery function so make sure the jquery script is loaded on the page as well as this function extension on the page. Then:

$("#SomeElement").makeAbsolute();
# re: Making Element Position Absolute with jQuery
by Alex K. December 27, 2013 @ 9:35am
Just for the case, you want to use it for multiple elements on a page which were positioned as inline-block before:

$.fn.makeAbsolute = function(rebase) {
return $(this.get().reverse()).each(function() {
el = $(this);
pos = el.position();
el.css({ position: "absolute",
marginLeft: 0, marginTop: 0,
top: pos.top, left: pos.left });
if (rebase)
el.remove().appendTo("body");
alert("99");
});
}

A simple direction-change did the trick.

Regards and thanks for the code!
 


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2014