Several ways to locate in the "Go" html

http://www.cnblogs.com/Jerry-Chou/archive/2011/11/02/2233094.html 1,static (default)

When you do not specify a positioning method for an element (such as a div), the default is static, which is to place the element in a suitable location, based on the flow of the document. So in different resolution, the use of flow-based positioning can be very good self-suitable, to achieve a relatively good layout effect.

In general, we do not need to indicate that the current element is positioned as static--because this is the default positioning method. Unless you want to overwrite the positioning system inherited from the parent element.

2,relative (relative positioning)

On the basis of static, if I want an element to make some adjustment (displacement) in his original position, we can set the element position to relative and specify relative displacement (using top,bottom,left,right).

It is important to note that the relative positioning element is still in the document Flow , still occupy the space he originally occupied-although he is now not in the original position.

3,absolute (absolute positioning)

If you want to place an element in a document in a specified location, you can use absolute to locate it, set the element's position to absolute, and use top,bottom,left,right to locate it.

Absolute positioning causes the element to be deleted from the document stream , and the result is that the space occupied by the element is filled with other elements.

4,mix relative and absolute (mixed relative positioning and absolute positioning)

If you set relative on a parent element and set absolute on one of its child elements, such as:

1234	<divid="parent" style="position:relative">    <divid="child" style="position:absolute">    </div></div>

The reference to the absolute positioning of the child element is the parent element .

With hybrid positioning, we can use CSS similar to the following to achieve two columns of positioning

123456789101112131415

#div-parent { position:relative;}#div-child-right{ position:absolute; top:0; right:0; width:200px;}#div-child-left{ position:absolute; top:0; left:0; width:200px;}

5, fixed (stationary positioning)

We know that the reference to absolute positioning is "the last positioned parent element (static does not count)", so what if I want an element to be positioned with a reference that is always the entire document (viewport)?

The answer is to use fixed positioning, where the reference to the fixed position is always the current document. With fixed positioning, it's easy to have a div positioned on top left and right in the browser document. For example, if you want to add a div with an informational tip and pin the div to the top right, you can use the following CSS

1	.element  { position:fixed; top:2%; right:2%; }

6,float (floating)

For a float, you need to know:

* Floating will remove the element from the document stream, and his space will be replaced by other elements.

* Floating parameter is the parent element, which is floating in the parent element of this container.

* In order to clear the effect of floating elements after the floating element, we add a div after the floating element and set the div's clear to both.

* If two elements are set to float, then two elements do not overlap, the first element occupies a certain amount of space, and the second element immediately follows. If you do not want the second element to follow immediately, you can use clear for the second floating element.

7,reference

Value	Description
Static	Elements renders in order, as they appear in the document flow. This is default.
Absolute	The element is a positioned relative to their first positioned (not static) ancestor element
Fixed	The element is positioned relative to the browser window
Relative	The element is positioned relative to it normal position, so "left:20" adds pixels to the element's left position
Inherit	The value of the position property was inherited from the parent element

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

Http://davidwalsh.name/css-fixed-position

Http://www.w3schools.com/cssref/pr_class_position.asp

Http://www.hunuo.com/zhuanti/sheji/275.html

Several ways to locate in the "Go" html