Note: This example may not be displayed in IE5.x. Use IE6, IE7, Firefox, Opera, and other browsers for debugging!
Some time ago, I remember who raised a question in the group that was really hard for everyone to understand:
Copy codeThe Code is as follows: <ul>
<Li> first </li>
<Li> <span> second </span> </li>
<Li> Part 3 </li>
<Li> block 4 </li>
<Li> fifth </li>
</Ul>
If I set LI to position: relative; Set span to position: absolute; then we will find that no matter how high the z-index value of SPAN is, it will always be under the parent level.Copy codeThe Code is as follows: * {margin: 0; padding: 0; list-style: none ;}
Li {width: 100px; height: 100px; margin: 0 5px 0 0; background: #000; float: left; position: relative; z-index: 1 ;}
Li span {width: 200px; height: 200px; background: # c00; position: absolute; top: 0; left: 100px; z-index: 1000 ;}
Xmlns = "http://www.w3.org/1999/xhtml">
- First
- Second
- Part 3
- Fourth
- Fifth