Absolute CSS positioning

I. Let's look at two examples.
1. XHTML Code < Body >
  < Div Class = "Relative" >
< Span Class = "Absolute" > Test absolute </ Span >
  </ Div >  
</ Body >

2.css code . Relative { Position : Relative ; Height : 120px ; Border : 2px solid red ;   }
. Absolute { Position : Absolute ; Top : 10px ; Left : 10px ;
Padding : 5px ; Text-align : Center ;  
Border : 5px solid green ; Background-color : Gold ;   }

3. Running result

4. Improve CSS
Remove the positioning of the span parent element. The CSS code is as follows, . Relative { Height : 120px ; Border : 2px solid red ;   }
. Absolute { Position : Absolute ; Top : 10px ; Left : 10px ;
Padding : 5px ; Text-align : Center ;  
Border : 5px solid green ; Background-color : Gold ;   }

5. Modified running results

Ii. Analysis of results
The absolute position of the element relative to the nearestLocatedIf the element does not have an existing ancestor element, its position may be a body or HTML element based on user-defined differences; absolute positioning elements are separated from the document stream and no longer occupy space. Position: absolute must work together with the top and left attributes to complete absolute positioning.
Therefore, the core idea of absolute positioning is to sort an element out of the normal Document Stream and rearrange it relative to another element.
Note:Relative positioning is used to give an absolute positioning ElementLocatedNot to describe relative positioning.

Iii. instance applications
We often encounter the problem of incomplete system fonts. The web page runs well on our computer, but after uploading, we find that the style has changed ...... Of course we can upload a font, but this is not what I want to introduce. Another method is to replace text with an image, so that the image will save the style information of the text without affecting the effect. If the image download fails, the overwritten text will be displayed normally. Image replacement text mainly uses absolute positioning. This method is also used in Seo optimization. It is also a classic case. You can refer to the relevant information and will not go into details here.
Note: Relative positioning is used to give an absolute positioning Element Located Not to describe relative positioning.
1.xhtml code < H1 > Text replacement </ H1 >
< H2 ID = "H2"   > This is a Chinese character < Span > </ Span > </ H2 >

2.css code # H2 { Position : Relative ; Width : 206px ; Height : 52px ; Overflow : Hidden ;   }
# H2 Span { Position : Absolute ; Width : 206px ; Height : 52px ; Left : 0 ; Top : 0 ;  
Background : URL ("font.jpg") No-repeat ;   }

3. Running Effect
 
Note: From: http://www.cnblogs.com/tjdxlmy/archive/2009/07/31/1536189.html