Unclear about Position: relative in CSS

Question

I am currently studying CSS, and find that I am unclear about what position: relative is. I understand that we can use position: relative on the parent and position: absolute on its child to make the absolute positioning relative to its parent instead of the broswer.

However, when I come to the case this website, http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm, shows to me. I get stuck and do not understand what does the 2 position: relative about.

The key CSS are shown below:

            body {
                margin:0;
                padding:0;
            }

            #container2 {
                float:left;
                width:100%;
                background:orange; /* column 2 background colour */
            }
            #container1 {
                float:left;
                width:100%;
                position:relative;
                right:30%;
                background:#fff689; /* column 1 background colour */
            }
            #col1 {
                width:66%;
                position:relative;
                left:32%; /* 50% + 2%, */
            }

To have a visual picture of how CSS does, you may go to http://jsfiddle.net/hphchan/631j5nLs/.

Hope one can tell me what does two position: relative is all about. I have been searching for a while, and still cannot get the answer.

Thanks.

possible duplicate of [Position Relative vs Position Absolute?](http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute) — kittykittybangbang, Jun 26 '15 at 01:53
It is used to make `left`/`right` offsets to work. That's it! — Mimi, Jun 26 '15 at 02:01
no, if position: relative is missing, you will see a big difference!!! Look at the background. — CHANist, Jun 26 '15 at 02:06
@kittykittybangbang maybe I am so stupid... I don't quite get the point there and relates it to the 2 relative position in my question. Maybe because I understand partial of the answer clearly, not all. I think I understand `Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.` But how can this idea be applied to my question? What is the relationship between 2 position: relative? — CHANist, Jun 26 '15 at 02:19

light · Accepted Answer · 2015-06-26T02:34:03.143

By default, elements flow from top to bottom. The browser will always display block elements from top to bottom automatically.

In order to position elements manually, you need to set the position attribute, then give it some offset, specified by the top, right, bottom or left properties.

An element with position:absolute will be taken out of the document flow, and placed at an offset from its parent.
An element with position:relative will simply display itself at the position it was originally supposed to, but added with some offset.

Now, on to your fiddle.

#container1 (yellow) is in #container2 (orange). Being block elements, both would try to take up the entire width whenever possible. By default, #container1 should position itself at the top-left corner of #container2, taking up full width of #container2. But because of position: relative; right:30%, it will try to make itself stay 30% from the right border of #container2, so now: only 70% of the width is visible; the other 30% is outside the screen (to the left).

#col1 is in #container1. It takes up 66% width, as specified. But remember, it needs to start from the top-left corner of #container1, which is currently outside (by 30%) the screen! In order to "bring it back" into the screen, the author used left:32%, which makes its 2% into the screen.

As you can probably see, this is a convoluted way of positioning elements. If you bring it too far, nobody would be able to make sense of things. For example. the content (badly named #col1) is supposed to take up 50% width, but the CSS says width:66% because of this weird hack. Ironically, the copy in the fiddle says it contains "no CSS hacks". Also, the fiddle contains the (ab)use of floats, use of un-semantic tags, div-itis, lack of separation between content and presentation...

I'd say overall: it is a bad example for beginners to read.

Unclear about Position: relative in CSS

1 Answers1