[Browsers participating in the test: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[Operating system: Windows]
It seems that many students are obsessed with the problem of why this div is on the upper layer and that div is on the lower layer, and no matter how they set the z-index, they cannot be on top. They suffer from vomiting and diarrhea, nausea and insomnia, and end up depressed, so they dare not use layer overlay at will. . However, the superposition effect of layers appears frequently in interaction design, so we must control it. To control it, we must master its laws.
First, clarify a few concepts that need to be used in the article:
1. Static positioning: position:static (the default value of the position attribute).
2. Dynamic positioning: position:relative or position:absolute or position:fixed.
3. Ancestor element: any element that contains this 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 by the author and are used in this article only.
The peer element is a very key word and needs to be explained in detail here.
| The following is the quoted content: <div> <div></div> <div id="a"></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="f"> <div></div> <div id="b"></div> <div id="c"></div> <div></div> <div></div> <div></div> </div> |
In this example, div#a and div#b are not "sibling elements". Only elements like div#b and div#c that have the same parent div#f can be called "sibling elements".