In the process of control using DIV + CSS layout, orientation has been considered to be a difficulty, which is mainly characterized by many Internet users without a deep understanding of clear positioning principle, the clutter from web pages often make them at a loss, but on the other side some masters often with the aid of the location of the power of make some cool effects, such as CSS album and so on, so their sprawling web master and perfect design form bright contrast, partly on the net friend of beginner's positioning, also in their minds to form such a thought: when I play skillfully DIV + CSS positioning, I was already high. No matter what you think, I hope the following tutorial will only make you more in-depth understanding of the CSS positioning properties.

1. The positioning of the professional interpretation
code is as follows:


# box_relative {
position: relative;
left: 30 px;
top: 20 px;
}

as shown in the figure below:
 
note that when using relative positioning, whether or not to move, still occupy the space of the original element. Therefore, mobile elements can lead to other box it covers.
absolute positioning (absolute) : will be endowed with the positioning method of the object from the document flow out, using the left, right, top, bottom and other attributes relative to one of the most close to the most absolute positioning positioning set the parent object, if the object's parent is not set positioning properties, namely, positioning or follow the HTML rules are based on the body left upper corner of the object as the reference position. Absolute positioning objects can be stacked, cascading sequence can be controlled by z - the index attribute, z - the index value of integer without unit, large on top, you can have a negative (minus FF not supported).
absolute positioning make the position of the element has nothing to do with the document flow, therefore do not occupy a space. That, unlike relative positioning, relative positioning actually considered part of the normal flow positioning model, because the position of the element relative to its position in the normal flow.
common flow in the layout of the other elements like absolute positioning element does not exist:

 code is as follows: 


# box_relative {
position: absolute;
left: 30 px;
top: 20 px;
}

 
absolutely positioned elements relative to the position of recent has positioned ancestor element, if the element without has positioned ancestor element, then its position relative to the first containing block.

2. The positioning of the image interpretation


This concludes the body part