homepage Welcome to WebmasterWorld Guest from 54.237.54.83
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
position relative and position absolute
difference between position relative and position absolute
Shreya




msg:4499704
 12:24 pm on Sep 25, 2012 (gmt 0)

what is the difference between position relative and position absolute ? and particular both are when used ?

 

rainborick




msg:4499825
 4:22 pm on Sep 25, 2012 (gmt 0)

Simply put, relative positioning positions the element in relation to the normal document flow (layout). Absolute positioning removes the element from the normal document flow and positions it in relation to its parent positioned containing block. The dry, but actually very helpful specifications can be found in the W3C Visual Formatting Model Specifications [w3.org].

alt131




msg:4499853
 5:42 pm on Sep 25, 2012 (gmt 0)

Hi Shreya,

As rainborick says, the recommendations are really helpful, but they can be challenging to read at first. The Web Education Community Group [w3.org] has some tutorials that break the information down and give examples for you to try. Positioning is split into static and relative positioning [w3.org], and absolute and fixed [w3.org].

In terms of your question about when each would be used, that really does depend on what you are trying to achieve.

lucy24




msg:4499903
 7:49 pm on Sep 25, 2012 (gmt 0)

Different answer: You can write www pages happily for your entire life without ever using {position: absolute} -- or {position: anything-at-all} other than the default {position: static}.

The names aren't very well chosen, are they? If you didn't already know, you would have no idea what the difference is between "static" "absolute" and "fixed" -- and "relative" sounds as if it would be the default ("Just put it wherever it ends up") but it actually means something else.

Shreya




msg:4500068
 9:05 am on Sep 26, 2012 (gmt 0)

still i m confused not clear the concept about position.

lucy24




msg:4500088
 9:51 am on Sep 26, 2012 (gmt 0)

You don't need to use {position: blahblah} at all. By default, things will go where you expect them to go. Don't say anything about position unless you're sure you want something unusual to happen.

{position: fixed} = keep it in the same part of the viewport even when the user scrolls up & down. Most useful for navigation bars.

{position: absolute} = ignore everything else on the page, and put it at some exact location (in px or ems or percent) measured from the edge of the page. If you don't specify a top/bottom, it will be horizontally in line with surrounding text. (I use this primarily for page numbers in e-books. Shove them out into the margin where they can't bother anyone.)

{position: relative} = offset, for example "Put it 3 ems to the left of where it would normally be". With {position: relative} the numbers you give for top, left etc don't refer to where the element goes; they say how far to offset it. All surrounding elements will pretend that a relatively positioned element isn't really offset.

All three of these run the risk of crashing into other elements, because they don't care if something else is already in the same location.

Normal positioning is {position: static;}. Things line up, one after the other, and keep out of each other's way. This is the default.

But why don't you simply experiment? Use single words and also use long slabs of text. Give each thing a border or a background color. See what happens with each one.

Paul_o_b




msg:4500101
 10:19 am on Sep 26, 2012 (gmt 0)

Hi,

Absolute Positioning:


When you absolutely position something you take it out of the normal flow of the page and everything else on the page (outside of the absolute element)will not know that the absolute element exists and will take no care in avoiding or interacting with it. It's like creating little islands of their own.

An absolute element is positioned with respect to its nearest ancestor that has a positioned defined other than static. If no such ancestor exists then the absolute element is placed in relation to the top left of the viewport.

Therefore if you say:

.test{
position:absolute;
top:100px;
left:100px
}

The element will now be placed 100px from the top left of its positioned parent. If as mentioned no such positioned ancestor exists then the element is placed 100px from the top left of the viewport and will just sit solidly in place (along with its children) and ignore anything else going around it (except to scroll with the viewport of course).

If you wanted an absolute element to stay track with say a centred layout then you would ensure that the centred layout has position:relative applied (without co-ordinates) and the the absolute child will stay track with the top left position of that centred layout but of course may still sit on any static content in that area.

Use absolute positioning with care and do not use it for structural layout but rather use it in small doses where you may want to push an element to the right or left corner and sit on top of some other element. Use it in a context where the flow of the document is not compromised. For example you can't place an absolute into a page and then let content naturally flow beneath it. It's just not possible without absolutely positioning the other elements below and then you are tied into a rigid structure where everything becomes absolutely positioned and will be impossible to manage.

Content in your page should mostly be static positioned and then use floats for horizontal alignment and absolute positioning in small doses where needed.

Relative Positioning:

As mentioned above you can go years without needing to use relative positioning (with co-ordinates) as it is a very subtle property that is widely misunderstood even by those that think they know css well.

When you move an element with relative positioning it is offset from where it is in the flow of the document and then moved by the amount that you specify in the co-ordinates for top,bottom,left or right.

If you say:

.test{
position:relative;
top:100px;
left:100px
}


The element will be moved from where it would have been in the normal flow and then shifted left by 100 pixels and then down by 100 pixels. However, the important part to note here is that the flow of the page will not change at all.

Everything else on the page will believe that the element still occupies its original place and will react to the element as though it were in the position that it was before it was moved. It's akin to tearing a picture out of a newspaper and sticking it further down the page. Nothing else on the paper changes except that you have moved the picture somewhere else and most likely on top of something else.

You can say that an element moved with relative position is moved only visually but not physically. The space that the element previously occupied is always preserved.

You may think what use is that?

It is very useful in shifting elements a few pixels without disrupting the flow. If for example everything the page is nicely lined up but one element needs to be moved by 20px yet when you apply margins to that element everything else also moves then you could use relative positioning to move that element without affecting the positions of other elements.

So relative positioning with co-ordinates is not really good for structural layout unless you are doing advanced swapping column techniques but even then it is best avoided for something simpler and more natural.

Note that I have mentioned relative positioning when using co-ordinates but you will often see elements have position:relative added but no-co-ordinates used. This is fine and the reasons for this can be twofold. First as already mentioned a relative positioned element can be the container for an absolutely positioned child. Just adding position:relative does nothing else to the container and it will not be moved or change from its position unless you add co-ordinates.

The second reason for adding position:relative is when you want to add a z-index as only positioned elements can have z-index applied.

You will need a z-index where elements overlap and you want to control which is on top of the other. A lower z-index element (in the same context) will sit under and be obscured by an element with a higher z-index although children cannot be placed under their parent's background. (Contexts are atomic and the parent that has a z-index defined other than auto will control the level of all its children with respect to elements outside that context.
That means a child with a z-index of 1000 will not overlap an element outside that context that has a z-index of one unless the parent has a higher z-index. Ultimately its the z-indexed positioned parent that controls the stacking of its children with respect to elements outside that context. Also note that IE7 and under don't understand z-index:auto and will treat any positioned element as having a z-index of 0 and thus confining all children within that context.)

Static Positioning

position:static is the default and there's no need to specify it unless you are over-riding a previous value.

Static simply means that the element will remain in the flow of the document and for example each bit of text you type will follow on from where you left off. Most sites should be made of static elements so that one section naturally follows the next and should you later change something at the top of the page you don't need to change all the rest of the page as it will just take up the flow as required.

The best way to understand positioning is to go and practice and test out and see what happens. An hour or so later you will begin to understand the subtleties. It's not that difficult once you understand the rules and life suddenly becomes easier :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved