CSS Position Learning

IntroducedCSS position has four properties:

1. Relative
2. Absolute
3. Fixed
4. Static (default)

Sample Example

<div id= "Parent" >     <div id= "sub1" >sub1</div>     <div id= "Sub2" >sub2</div></ Div>

Sub1 and Sub2 are sibling relationships, and parent is their parental element.

1. Relative (relative positioning)

Relative positioning refers to the position relative to the original position of the element, and will occupy the original position.

The so-called original position refers to its position when the relative property is not set (the position of the static property)

The relative offset is relative to the upper-left side of margin.

For example, after setting the relative property on Sub1, the Top,right,bottom,left property is offset, and the position of the sub2 is unchanged (Sub1 will occupy the original position)

If you set the relative property to Sub2, it will also be offset relative to its original position (the SUB2 position will also be occupied)

2. Absolute (absolute positioning)

Absolute positioning is based on the upper-left corner of the padding of the parent object where it was recently located , and is basically divided into the following two scenarios:

1. For example, if you set absolute for Sub1, if the parent element of SUB1 (parent or its parent element) is set to absolute or relative, then sub1 will be positioned relative to the parent element.
2. If the parent element is not set absolute or relative, then the sub1 is positioned relative to the body.

At this time because sub1 position "free out", SUB2 will run to sub1 position (also can understand sub1 floating up, Dreamweaver called layer), its document flow will be based on the parent.

If you set absolute to sub2 again, it is also relative to the parent.

3. Fixed

Fixed is a special absolute, that is, fixed always in the body as the target object, according to the browser window to locate.

4. Static (default)

The default value of position, which is typically not set when the Position property is configured, is arranged according to normal document flow.

Reference:

Http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

Http://www.w3school.com.cn/css/css_positioning.asp

CSS Position Learning