Two div the first to use the positioning after how to let two div fall together

<Divstyle= "background: #ccc; width:100px;position:relative;clear:both; overflow:hidden; display:inline-block;">   <Divstyle= "z-index:0; height:100px; background: #ccc; width:100px;position:relative; display:inline-block;">
1

</Div></Div><Divstyle= "height:100px;height:100px; background:red; width:100px;">2</Div>

"Position:relative | Absolute | static | Fixed "

Source: http://www.chinaz.com/web/2012/1121/282830.shtml

A: relative positioning (position:relative): If an 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 (Top,right,bottom,left four value). Note: The element box set to relative positioning offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains;

B: absolute Positioning (Position:absolute): Absolute positioning makes the position of an element independent of the document flow, so it does not occupy space. In contrast to relative positioning, 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. Note: An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of the type of box it originally generated in the normal flow;

C: fixed positioning (position:fixed): The position of the fixed positioning element is always located in the upper left corner of the window; Note: IE6 is incompatible with this property;

D:static: No special setting, follow the basic positioning rules, can not be graded by Z-index hierarchy;

"Positioning principle: In the text flow, all elements of the position are limited by the text flow, but we can use CSS style to change the position of these elements (such as: margin,float), in fact, the real sense of displacement is achieved through the Top,right,bottom,left"

A:position:relative: The relative positioning element will not leave the document stream, it will refer to its own static position in the upper left corner, through the top,right,bottom,left to move the position. Note: The original location of the relative positioning layer will continue to occupy the document flow, such as:

When the red area is relatively positioned, the relative a point is shifted through the top:20px,left:15px, but the original position of the relative positioning layer will continue to be retained;

B:Position:absolute: The absolutely positioned element is detached from the document stream, and its closest parent anchor element is selected, and the position is moved by Top,right,bottom,left. Note: When the parent position property is static, the position of the absolute displacement is calculated with the body's origin coordinates , such as: When the red area is absolutely positioned, the position layer is detached from the document stream, if the a point layer is relative (or absolute , which is the parent of the red zone), is shifted by the location layer at point coordinates through TOP:20PX,LEFT:15PX, and when the parent is not positioned, the document is shifted by top:20px,left:15px with the body's origin coordinates;

Two div the first to use the positioning after how to let two div fall together