向绝对的初学者解释相对和绝对定位？

Question

Can you please relative and absolute positioning to me,I don't understand what they mean by both terms. I just want to get an alternative explanation and the run it through my own understanding to see if I am right.

Answer 1

Just watch this video:

http://www.cssreset.com/understanding-css-relative-and-absolute-positioning-explained/

Should solve the issue once and for all.

Answer 2

You can try this tutorial:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

It is clearly explained what is relative and absolute positioning in small steps one at a time.

Answer 3

• Let's start with position: static; Static is the default, so if nothing is specified, the element is static. It is the normal flow of elements on the page. For example when the element does not fit on the line, it goes to the next line.

• Then we have position: relative; Think of this as relative to its own position. Now we can use left, right, top and bottom to shift the element from its original position.

• Also, when setting an element's position to relative, the origin of any absolute child elements, is reset. In other words, position (0,0) of an absolute child element is the same as the relative parent.

• The next one is position: absolute; The element is now outside the normal flow of elements on the page. The position is measured from the origin of the first relative parent found. If no such parent is found, its position will be relative the the browser window, which is the same as position: fixed;