Absolute Position

Absolute Position Within a Div for Top, Right, Bottom, Left Properties

Jon Volks
Written By | @webproninja

Ever have one of those tips that you wished you knew about years ago? Well putting an absolute position within a div is one that I recently discovered. I’ve always tried to avoid using position absolute in my CSS but a recent design I was given had a lot of slider adjustments overlaying a group of slides. After fighting with negative margins and other techniques that did not work, I finally found the trick with absolute position. It’s really simple, make sure your parent div, has a position on it (generally it will be relative).

What… that simple? Yes! By default, a div will have a position of static which is not affected by the top, bottom, left and right properties. So if you’ve tried it, when you put right: 0, it most likely went to the right side of the screen and not the div that you’re within. Let’s take a look at some code (click on the html, css and result tabs):

By adding the “position: relative;” to box_parent, we can now use right and bottom on box_child to place this box in the lower right hand corner. Give it a try and remove the position relative from box_parent. I hope you enjoyed this CSS tip.

About The Author

Jonathan Volks is currently a Web Programmer at Skidmore College in Upstate New York. He enjoys everything about the Internet; from Search Engine Optimization to Web Programming. His hobbies include landscape photography and hiking the Adirondacks.

Leave a Reply

Your email address will not be published. Required fields are marked *