The Hitchhiker’s Guide to Ruby On Rails Galaxy

Records of my voyage through RoR Galaxy

How to use “position:relative” in CSS

Posted by arjunghosh on April 23, 2008

First the definition of CSS position Property:

“The position property places an element in a static, relative, absolute or fixed position.”

“We can also say that the CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element’s content is too big to fit in a specified area.”

CSS properties can also be dynamically changed with a JavaScript. The syntax is as follows:

object.style.position="absolute"

Example:

h1
{
position:absolute;
left:100px;
top:150px;
}

Possible Values for the “position” property:

static:
This is Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations).
Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

#div-1 {
position:static;
}

relative:
An element with position: relative moves an element relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position.
Let’s move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {
position:relative;
top:20px;
left:-40px;
}

absolute:
An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.
Let’s move div-1a to the top right of the page:

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

fixed:
An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

An excellent online resource to further understand it is here

Another thing related to CSS positioning is : float
We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we can use it for more complex layout tasks.

#div-1a {
float:left;
width:200px;
}

5 Responses to “How to use “position:relative” in CSS”

  1. One other use for position:relative is to be able to position childElements with position:absolute in regard to it’s parent instead of the document.

    So the parent that has position:relative set becomes the reference for top, left, right and bottom since its top left corner will become 0 as far as the child is concerned.

    You probably already knew this but the post didn’t reflect it so I thought I’d add it.😉

  2. arjunghosh said

    Yep should have included that in the post. Thanks Mats,🙂

  3. “So the parent that has position:relative set becomes the reference for top, left, right and bottom since its top left corner will become 0 as far as the child is concerned.”

    But that’s always true. If a child element uses absolute positioning, it will always be relative to the top left of the parent – no matter how the parent was positioned.

    So that’s not a use of relative positioning

  4. keyuri said

    great position example.

    thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: