CSS Position Properties Absolute relative five value interpretation

Currently almost all major browsers support the position attribute (except "Inherit", "Inherit" does not support all including IE8 and previous versions of IE, IE9, IE10 has not been tested), the following is w3school to position five value interpretation, A friend you need can refer to the following

Among them, absolute and relative are the most commonly used, fixed used more (where IE6 does not support fixed).

1, absolute (absolute positioning)

Absolute is an element that generates a sleep-to-position, out of the text stream (i.e. no longer occupies a position in the document), and is positioned by Top,right,bottom,left (TRBL), referring to the upper-left corner of the browser. You can select a parent object that has a location (which will refer to the combination of relative with absolute) or the body coordinate origin, or it can be hierarchically graded by Z-index. Absolute is based on the coordinates of the parent object as the starting point when the TRBL value is not set, and when the TRBL value is set, it is based on the top left corner of the browser as the original point. The specific cases are as follows:

Among them, absolute and relative are the most commonly used, fixed used more (where IE6 does not support fixed).

1, absolute (absolute positioning)

Absolute is an element that generates a sleep-to-position, out of the text stream (i.e. no longer occupies a position in the document), and is positioned by Top,right,bottom,left (TRBL), referring to the upper-left corner of the browser. You can select a parent object that has a location (which will refer to the combination of relative with absolute) or the body coordinate origin, or it can be hierarchically graded by Z-index. Absolute is based on the coordinates of the parent object as the starting point when the TRBL value is not set, and when the TRBL value is set, it is based on the top left corner of the browser as the original point. The specific cases are as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{margin:0;padding:0;List-style:None;}. Center{margin:30px;Border:#999999 Solid 10px;width:400px;Height:300px;}. Div1{width:200px;Height:200px;background:#0099FF;/*Set TRBL*/position:Absolute; Left:0px;Top:0px;}. Div2{width:400px;Height:300px;font-size:30px;Font-weight:Bold;Color:#fff;background:#FF0000;}</style>

This is the effect after setting the TRBL (set TRBL to the top left corner of the browser), when the TRBL is not set (the TRBL is not set to the parent object's coordinates as the origin), will be DIV1 changed to the following code

. Div1 {width:200px; height:200px; background:#0099FF; /* No setting TRBL */ position:absolute;}

The effect is as follows:

2, relative (relative positioning)

Relative is a relative meaning, as the name implies is relative to the element itself in the document should appear in the position to move the element, you can move the position of the element through the TRBL, in fact, the element still occupies the original position of the document, but the position of the visual relative to the previous move. The specific cases are as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{margin:0;padding:0;List-style:None;}. Center{margin:30px;Border:#999999 Solid 10px;width:400px;Height:300px;background:#FFFF00;}. Div1{width:200px;Height:150px;background:#0099FF;position:relative;Top:-20px; Left:0px;}. Div2{width:400px;Height:150px;font-size:30px;Font-weight:Bold;Color:#fff;background:#FF0000;}</style>

The code produces the following effects:

3. Combined use of relative and absolute

In the design of the Web page often use floating to the layout of the page, but the volatility caused by a lot of uncertainties (such as: IE browser compatibility problem). Relatively speaking, locating in some layouts is easier, faster, and more compatible (using relative with absolute), which is illustrated by an instance of the Web page (the Head section of the Web page), as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{margin:0;padding:0;List-style:None;}A, a:hover{Color:#000;Border:0;text-decoration:None;}#warp, #head, #main, #foot{width:962px;}/*Set Center*/#warp{margin:0 Auto;}#head{Height:132px;position:relative;}. Logo{position:Absolute;Top:17px;}. Head_pic{position:Absolute;Top:17px; Left:420px;}. SC{position:Absolute; Right:5px;Top:12px;}. SC a{Padding-left:20px;Color:#666;}. Nav{width:960px;Height:42px;Line-height:42px;position:Absolute;Bottom:0px;background:URL (img/nav_bj.jpg) no-repeat Center;}. Nav ul{float: Left;padding:0 10px;}. Nav Li{float: Left;background:URL (img/li_bj.jpg) No-repeat Right Center;Padding-right:40px;Padding-left:20px;text-align:Center;Display:inline;}. Nav Li a{font-size:14px;font-family:Microsoft Yahei!important;White-space:nowrap;}. Nav Li A:hover{Color:#FBECB7;}</style><title></title>

Effects such as:

In the above code, the first is to set the head relative positioning, then you can see that all the child elements in the set absolute after the relative head positioning, rather than relative body positioning. This is relatively simple and convenient compared to floating, and there is no need to worry about compatibility issues.

CSS Position Properties Absolute relative five value interpretation