CSS Page Layout tutorial: Layer Overlay 5 Principles-----Reprint

First, make clear the concepts that need to be used in the article:

1. Static positioning: Position:static (the default value for the Position property).
2. Dynamic positioning: position:relative or Position:absolute or position:fixed.
3. Ancestor element: Any element that contains the element.
4. Parent element: The ancestor element that directly contains the element.
5. Sibling elements: elements that have a common parent element.

Note: These concepts are customized for authors and are used only for this article.

Reference:

It's a very important word about sibling elements, and it needs to be explained in detail here.

2. <div>
   
4. <div></div>
   
6. <div id= "a" ></div>
   
8. <div></div>
   
10. <div></div>
    
12. <div></div>
    
14. <div></div>
    
16. </div>
    
18. <div id= "F" >
    
20. <div></div>
    
22. <div id= "B" ></div>
    
24. <div id= "C" ></div>
    
26. <div></div>
    
28. <div></div>
    
30. <div></div>
    
32. </div>

In this example, div#a and div#b are not "peer elements", and only elements like div#b and div#c that have the same parent div#f can be called "sibling elements."

End of quote

then take a look at these five rules :

Rule One : When peer elements are positioned the same way, and there is no Z-index setting, HTML is on the latter.

rule two : When peer elements are dynamically positioned and have z-index settings, the Z-index value is large.

Click here to test

Rule Three : the localization of peer elements in different ways, dynamic positioning on the home.

Click here to test

Rule Four : non-sibling elements, when arbitrary accesses than either and its ancestor elements do not have a dynamic layout, HTML on the latter.

Click here to test

rule Five : "Important" non-sibling elements, when arbitrary accesses than either or its ancestor elements have dynamic positioning, simultaneously looking up dynamically positioned ancestor elements, and respectively, from the highest level of the ancestor (or itself) to compare.

2. <div id= "AB" style= "Position:absolute;" >
   
4. <div id= "A" style= "position:relative; z-index:100; " >
   
6. <div id= "A_inner1" >
   
8. <div id= "A_inner2" >
   
10. <div id= "A_inner3" style= "position:relative; z-index:98; " >
    
12. <div id= "A_inner4" >
    
14. <div id= "A_inner5" >
    
16. </div>
    
18. </div>
    
20. </div>
    
22. </div>
    
24. </div>
    
26. </div>
    
28. <div id= "B" >
    
30. <div id= "B_inner1" >
    
32. <div id= "B_inner2" >
    
34. <div id= "B_inner3" style= "position:relative; z-index:99; " >
    
36. <div id= "B_inner4" >
    
38. </div>
    
40. </div>
    
42. </div>
    
44. </div>
    
46. </div>
    
48. </div>

Case 1: z-index of child elements no matter how big, the parent element is large.

Case 2: The parent element is under, and the child element can also reside.

Case 1, Condition 2 combined with extended comparison.

In fact, the first four points are the basis, only the 5th more difficult to understand, here to explain in detail:

In this example, we compare the cascade relationships between Div#a_inner5 and Div#b_inner4.
To the next level of the ancestral element div#ab which they share, Div#a_inner5 's ancestral elements include: Div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4;div#b_ Inner4 's ancestral elements include: Div#b,div#b_inner1,div#b_inner2,div#b_inner3.
Then analyze their ancestral elements with dynamic positioning: The elements of div#a_inner5 that contain dynamic positioning are: the elements of the div#a,div#a_inner3;div#b_inner4 ancestor element are: Div#b_inner3.
Then compare them with the highest level: div#a > #div #b_inner3.

The parent element, the child element can also reside in the situation, is the use of non-sibling elements in the ancestor element with dynamic layout, its comparison is not position:static, and its ancestor elements can be compared by the location of HTML.

End of quote

Of course, sometimes there are special cases, such as flash, such as IE6 in the select can not be covered, these are abnormal situations, you can search their own related articles.

CSS Page Layout tutorial: Layer Overlay 5 Principles-----Reprint