Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS confused about ‘relative’ and ‘absolute’ position !

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #45517
    Nishant
    Participant

    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’.

    #138634
    Paulie_D
    Member
    #138638
    Nishant
    Participant

    Thanks for your suggestion. Great help :)

    #138639
    Senff
    Participant

    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.

    #138640
    posterity576
    Participant

    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).

    #138642
    TheDoc
    Member

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

    #138643
    posterity576
    Participant

    @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.

    #138690
    Nishant
    Participant

    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 ?

    #138738
    __
    Participant

    **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.

    #138755
    posterity576
    Participant

    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!

    #138801
    Nishant
    Participant

    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////

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.