confused about ‘relative’ and ‘absolute’ position !

[Nishant]

Yes, I know theory about these. i have been read about it at this site and at many other sites but the the concept is not so clear. i want to know that How the position works in css. In many ‘CODEPEN’ i had change position value to know that how it really work but all result was unpredictable .
I am learning and practicing CSS very hard but i am upset now because of it. i have been read about ‘position’ at more than 20 sites and every time i think now it’s clear but when practicing, got stuck that when to use ‘absolute’ and when ‘relative’.

[Paulie_D]

https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

[Nishant]

Thanks for your suggestion. Great help :)

[Senff]

Element with relative position: if it has TOP, BOTTOM, LEFT and/or RIGHT values, then its position will be shifted that much from it’s original position. Example: if it has top:-10px, it will be placed 10 pixels higher compared to its original position. Or, if it has left:20px, it will be moved 20 pixels to the right.

Element with absolute position: will be positioned with the coordinates it has been given (TOP, BOTTOM, LEFT and/or RIGHT), with the zero point being in the top left corner of the nearest parent that has position relative. Example, if it has left:0; top:0;, it will be placed at the top left of the nearest relative parent.

These are the basics that keep me sane about this, hope it helps you.

[posterity576]

I don’t know whether Chris explains this bit in the video @Paulie_D posted, but because (as you will learn) absolutely positioned elements are no longer part of the document flow, it is important to set a z-index when you want to interact (_e.g._, click an anchor link, add hover effects to different elements, etc.) with those elements. For this reason, I would also suggest learning about the CSS property z-index (if, of course, you don’t know about it already).

[TheDoc]

@posterity576 that’s only true in certain situations. You can have absolutely positioned elements without even needing to *think* about z-index.

[posterity576]

@TheDoc In the cases I’ve run across, when you need to _interact_ with those elements, a z-index is always required. I agree, however, that when your absolutely positioned elements are solely for design purposes, _thinking_ about z-index isn’t necessary.

Regardless, there _will_ be instances when @bhaktanishant needs to use z-index, and so it will be important to know what z-index is, its function, and to what situation it could apply, such as interacting with AP page elements.

[Nishant]

Thanks to all of you.
I created a [PEN](http://codepen.io/anon/pen/quaKr “”) to understand position and have some questions.

1: ‘**absolute1**’ box and ‘**relative1**’ box both have defined with ‘**top: 30px**’ but ‘**relative1**’ box scaling 30px from border of body and ‘**absolute1**’ box scaling 30px from up above the border why ?

2: when ‘**relative1**’ is defined with **top:30px** then some part of it get behind ‘**relative2**’ so have i scale ‘**relative2**’ same as ‘**relative1**’ every time i scale ‘**relative1**’.

3: How to set ‘**relative1**’ and ‘**relative2**’ so that when scaling ‘**relative1**’, ‘**relative2**’ automatically scale with ‘**relative1**’ ? (will i have to set margin-bottom for ‘**relative1’** for this ?)

4: Half of ‘**absolute2**’ is below border so how to set ‘body’ that always all elements float in ‘body’ ?

5: Last but very important question, when and why use ‘**relative** position’, because i think ‘**absolute** position’ can do everything that ‘**relative**’ does ?

[__]

**1**. As @Senff mentioned above, `relative` positions an element with reference to its “natural” (i.e., where it would appear _without_ any styling) position, whereas `absolute` positions it with reference to the [closest non-statically positioned] parent element.

Because your `` element has padding, `#relative1` would normally be 20px from the top edge of the body – plus `top:30px` makes 50px. `#absolute1` ignores where it would “normally be,” and so is exactly 30px from the top of the body.

**2.** I don’t understand what you mean by “scale” in this context.

**3.** Same question.

**4.** If by “**float** in body” you mean “**completely contained inside** the body,” then you’ll simply need to pay attention to how big your elements are and how much space they have available.

_([`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float) means something else entirely.)_

In this instance, your body is 260px* tall. Your `#absolute2` is 100px tall, which leaves you with 160px before it overlaps the bottom of the body. Because you positioned it with `top: 180px`, it overlaps the bottom border by 20px.

* _observe: when you remove the positioning, [you can see where your relative elements would appear “normally.”](http://codepen.io/anon/pen/cqJnu) Each `#relative…` div is 100px tall, plus your `` element works out to be 20px tall. Your `` has 20px top and bottom for padding._

_100 + 100 + 20 + 20 + 20 = 260._

**5.** There are other differences, but I think these answers clearly demonstrate that `absolute` cannot “do everything `relative` does,” and vice-versa.

[posterity576]

I agree with everything @Senff and @traq said and will just add (for reasons of clarity) that if position: relative has not been defined for any page element, then the parent of the absolutely positioned element or elements will be the top-most page element (_i.e._, html).

Take the bottom bit of code as a simple example:

The HTML:

This is a small chunk of text

The CSS:

.content {
width: 70%;
background-color: #BADA55;
}

span {
background-color: #facade;
position: absolute;
left: 0;
top: 0;
}

If you were to render the top bit of markup and CSS in a browser, you will notice that the span appears at the top-most and left-most part of the viewport. If, however, you want the span to appear at the top left of the div, simply give the div a position of relative, like so:

.content {
width: 70%;
background-color: #BADA55;
position: relative; /*assigning position: relative here makes this div the parent*/
}

It should be clear from the above that assigning a position: relative to the .content div forces it to be the parent of the span. Instead of appearing at the top-most and left-most part of the screen, the span will appear only at the top left of the div.

Cheers!

[Nishant]

Thanks for this great information.

[@posterity576](https://css-tricks.com/forums/profile/36669/posterity576 “”) and [@traq](https://css-tricks.com/forums/profile/traq “”) you both just cleared my concept very well.

From where will i get this type of information to get my concept clear. i never found this on any site neither on ‘css-tricks’, they all have only basic theory.

Thanks again////

[Author]

Posts