CODEWITHSUNDEEP
cssposition
CHANist
CHANist

Reputation: 1402

Unclear about Position: relative in CSS

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.

Upvotes: 0

Views: 106

Answers (1)

light
light

Reputation: 4287

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.

Upvotes: 1

Related Questions