Not Understanding Aboslute & Relative Positioning


#1

Hey guys, I'm having a hard time understanding what absolute and relative positioning actually does, or means. I understand fixed completely. Nothing's really stumped me until now though. I do understand what to type in the CSS tap (i.e. positioning: relative;), but I just don't understanding what absolute or relative are actually doing, or how they can help me. If someone could give me a more detailed explanation, that would be great. Thanks.


#2

When the document first loads, it starts out with static elements that are drawn in normal flow across and down the window. The default position property on all elements is static, beginning with <body> and all elements that descend from it.

static elements don't have any additional positional properties, such as top, right, bottom or left.

To give elements positional properties we set the position property to either relative, which keeps the element in normal flow, or absolute which takes the element out of normal flow.

Say we have something like this:

<body id="static">
    <div id="relative">
        <div id="absolute">

        </div>
    </div>
</body>

Now lets give them some CSS properties:

#relative {
    position: relative;
    top: 20px;
    left: 20px;
    height: 400px;
    width: 400px;
    border: 2px solid green;
}
#absolute {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100px;
    width: 100px;
    border: 1px solid red;
}

What we will see is a 400 x 400 box with a 2 pixel wide green border, 20 pixels below the top of the window, and 20 pixels right of the left edge of the window. In the lower right corner of the box is a 100 x 100 box with a 1 pixel wide red border.

It is worth noting that had the absolutely positioned element not been inside a relatively positioned element, it would have appeared at the bottom right corner of the window.

Study this example and we can discuss this some more if you still have questions.


#3

About positioning, i assume you figured out padding?

Now, we have 4 different positions:

static (which is default)
relative
absolute
fixed

lets start with static, you can push static elements around with margin. pretty simple. It is getting interesting when use the 3 remaining positions, because besides margin, we then also have:

left, right, bottom, top

which we can use to position our elements, lets start with absolute, from the exercise:

The first type of positioning is absolute positioning. When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>

this explanation is true if we use left, right, bottom and top. Not when using margin, when using margin, we just push the element around. as you can see in this bin we have a static div (#outer) and a absolute div (#inner) and as you can see, #inner position relative to html, because parent (#outer) is static, if you where to change #outer to relative, #inner would position relative to #outer.

Lets quickly cover position: fixed; it works pretty much like absolute, except when you scroll it stays exactly where it is (unlike position: absolute), it is "glued" to the screen if you like. For the rest it is the same.

Now, lets cover position: relative; from the exercise:

Relative positioning is more straightforward: it tells
the element to move relative to where it would have landed if it just
had the default static positioning

which again is true if you left, top, bottom and right. Before i continue, you need to realize that left, top, bottom and right do not work on static elements. Now, look at this bin, as you can see, margin is pushing #one and #two down. however, if you where to change margin-top: 50px; to top: 50px; #one would be moved 50px relative to where it would have been, and not push down #two.

now, the final bin, as you can see, margin-bottom is pushing the red block (#two) down. if you where to remove margin-bottom: 30px; you will see that #two shifts up. If then you where to add bottom: 30px; you will see #one shifting up, so there is a big difference. margin-bottom will push the element below 30px down, where bottom: 30px will offset #one by 30px from where it was

There you go, hope this helps understanding positioning. feel free to ask if you have any questions


#4

Thanks, this explaination really helped.
Instead of doing exactly what the exercises told me to do, I played a little with the "top, right, bottom, left" properties...
So, if you ask me: I would say that the exercises 17-19 are not really suitable to understand what the difference between relative, static, absolute actually is!
Because you are told to use the properties "margin-top, -right...". So when i followed the instructions, I did not see any difference between the results. It alwas came out with the same results --> the inner one was moving 200px to the right (away from the border outer box). In my opinion you cannot learn it by this exercise. In the end it was very easy by watching some YouTube videos about the topic, but this excersises confused :confused: me that hard, that it took me about an hour to understand it. :cry:


#5