CSS in layman's orientation

In the front we simply understand the box model, here we do not review the ha. What's not clear to see my last blog post. In fact, before positioning, we must first understand a thing: document Flow, what is the document flow? Is it related to the document? Is it a DOM tree?

This pair of questions we should how to solve. Haven't started to locate Ah ... What should I do now?

Document Flow: In fact, you know the document? If it is

Everybody, look at this thing. Other he is a normal stream. HTML is written from top to bottom, left-to-right layout. Each non-floating block-level element is exclusive to one row, arranged from top to bottom, and the inline elements are arranged from left to right. If the current row cannot be arranged, another row is then floated. It is easier to understand what is going on behind the document stream.

relative positioning: relative positioning is a very easy concept to master. If a element is positioned relative to it, it will appear where it is located. You can then move the element "relative to" its starting point by setting a vertical or horizontal position.

Do we actually find any change? What do you mean by that? If we set the left

I've changed. So happy? We can do this by using this to center the tab menu. So happy. He's out of the flow of documents? Do you see him out of the document stream? The answer must be no, I do not know what this thing ah. What is this thing. And how relative positioning is relative, what is this object? (relative positioning is relative to his original position) and that is why the third Div has not changed. According to the truth, he should replace the original thing. Why not? Now it's up to us to focus on the relative positioning characteristics: relative will cause the relative change of its position, without affecting the position and size of other elements. This is one of the main points of relative. The second point is that relative produces a new positioning context.

Locate the context?

In fact, it is summed up as a sentence:the positioning of the relative element is always relative to the position of the element itself, and other elements do not matter, and will not affect other elements.

absolute Positioning: absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space. This is different from relative positioning, where relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream.

Features: The absolute element is detached from the document structure. Unlike relative, the positions of the other three elements are rearranged. As long as the element is out of the document structure, it can be destructive, causing the parent element to collapse. (You should immediately be able to remember that the float element is also out of the document structure) although the absolute element is out of the document structure, its position has not changed, but it is still in its original position, because we do not set the top and left values at this time. The absolute element hovers over the page, obscuring the contents of the page below. Finally, by setting the top and left values for the absolute element, you can customize its content, which is usually used more often. It is important to note that when you set the top and left values, the elements are positioned relative to the nearest positioning context, not relative to the browser.

One thing to be aware of in this: absolute's positioning is much more complex than the previous two. If you set the top and left for absolute, the browser will determine its vertical and horizontal offsets based on what the browser will recursively find for all the parent elements of that element if a setting is found position:relative/absolute/ The fixed element, which is positioned as the base of the element, is positioned as a browser boundary if it is not found. One sentence is to find his father is a (position:relative/absolute/fixed) element

See: Http://www.w3school.com.cn/css/css_positioning_absolute.asp

Http://www.cnblogs.com/wangfupeng1988/p/4322680.html

CSS in layman's orientation