위치:상대적/절대깨뜨릴 수 없는 레벨_경험치 교환

참고: 이 문서의 예제는 IE5.x에서 표시되지 않을 수 있습니다. 디버깅하려면 IE6, IE7, Firefox, Opera 및 기타 브라우저를 사용하십시오!
얼마 전 그룹에서 누군가가 모두가 정말 이해하지 못하는 질문을 했던 기억이 납니다.

코드 복사 코드는 다음과 같습니다.

• 첫 번째 블록


• 세 번째 블록
• 
  
• 네 번째 블록
;/li> 아무리 높게 설정하더라도 항상 그 뒤에 있는 상위 블록 아래에 있습니다.

코드 복사

코드는 다음과 같습니다.*{margin:0; ; 목록- 스타일: 없음;} li {너비:100px; 높이:100px; 배경:#000; 위치:상대적; >li 폭:200px; 높이:200px; 위치:절대:0; z-index:1000;}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">첫 번째 블록<meta http-equiv="Content-Language" content="zh-CN"> <title></title>두 번째 블록<style type="text/css"> /*<![CDATA[*/ *{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;} /*]]>*/ </style> 세 번째 블록<ul> <li>네번째 블록</li> <li>다섯 번째 블록<span> </span> </li> <li> </li> <li> <li> </li>[Ctrl+A 모두 선택 참고: </ul>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 팁: 먼저 코드의 일부를 수정하여 을 다시 실행해 보면 자식의 z-index 값이 1000이고 position:absolut로 설정되어 있음을 쉽게 알 수 있습니다. 자식은 모두 부모 아래에 보관됩니다. . 오랫동안 생각해 봤는데, 근본적인 문제는 같은 위치를 설정하는 것: 같은 레벨의 레이블 간의 레벨은 z-index로 넘을 수 없다는 것입니다. 위의 예에서 첫 번째 LI의 레벨은 항상 다음 LI의 레벨보다 작으므로 LI의 하위 항목에 position:absolute를 설정하여 매우 높은 z-index 값을 제공합니다.
다음과 같이 생각해 볼 수도 있습니다. LI에 대해 position:relative를 범위로 설정하는 것이 좋지 않을까요? 매우 사실입니다. 다른 LI가 position:relative를 설정하지 않으면 필요한 하위 항목이 모든 콘텐츠 위에 떠 있을 수 있습니다. 그러나 실제로 모든 LI에 범위가 필요하고 속성이 동일해야 한다면 어떻게 될까요? 물론 이 효과가 반드시 필요한 것은 아닙니다. 그러나 우리는 그러한 효과가 필요합니다. 모든 하위 항목은 숨겨지고 마우스 반응이 있을 때 나타나며 모든 콘텐츠 위에 떠 있습니다. 위에서 본 것처럼 자식이 표시될 때 다음 부모 레이블 아래에 눌려지기 때문에 이것이 실제로 골치 아픈 일이라는 것을 알아야 합니다. 이 마우스 반응의 위치 지정 효과를 구현해 보겠습니다. 코드 복사

코드는 다음과 같습니다.

  

• 第一块
  

• 第二块
  

• 第三块
  

• 第四块
  

• 第五块
  

  

我们通过链接的鼠标事件来完成这个显示隐藏效果：

复制代码 代码如下:

*{margin:0; padding:0; list-style:none;}  
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}  
li a {position:relative; z-index:1; display:block; height:100px; width:100px;  background:#000;}  
li a:hover {background:#000000;} 
li span {display:none;}  
li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000; }  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/css"> /*<![CDATA[*/ *{margin:0; padding:0; list-style:none;} li {height:100px; margin:0 5px 0 0; float:left; width:100px;} li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;} li a:hover {background:#000000;} li span {display:none;} li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000; } /*]]>*/ </style> <ul> <li><a href="" title=""><span>第一块</span></a></li> <li><a href="" title=""><span>第二块</span></a></li> <li><a href="" title=""><span>第三块</span></a></li> <li><a href="" title=""><span>第四块</span></a></li> <li><a href="" title=""><span>第五块</span></a></li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    提示：您可以先修改部分代码再运行
我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性，然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果，我们会发现，所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢，其实以CSS想强行突破是不太可能，所以我们反过来想，能不能让这个没有被触发的父级标签没有position:relative;属性，而只是触发的时候才有级这个父级赋上这样的值？其实想到这里基本上已经可以解决所有的问题了：

复制代码 代码如下:

*{margin:0; padding:0; list-style:none;}  
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}  
li a {display:block; height:100px; width:100px;  background:#000;}  
li a:hover {position:relative; z-index:1; }  
li span {display:none;}  
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/css"> /*<![CDATA[*/ *{margin:0; padding:0; list-style:none;} li {height:100px; margin:0 5px 0 0; float:left; width:100px;} li a {display:block; height:100px; width:100px; background:#000;} li a:hover {position:relative; z-index:1; } li span {display:none;} li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; } /*]]>*/ </style> <ul> <li><a href="" title=""><span>第一块</span></a></li> <li><a href="" title=""><span>第二块</span></a></li> <li><a href="" title=""><span>第三块</span></a></li> <li><a href="" title=""><span>第四块</span></a></li> <li><a href="" title=""><span>第五块</span></a></li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    提示：您可以先修改部分代码再运行
我们只要针对a:hover来设定其属性为position:relative;就可以了，这样只有在鼠标触发的时候A才会被赋于一个相对定位的属性。这样就完成可以解决被其它父级标签所挡的尴尬了。
当然如果不介意IE6或是IE5.X这样的浏览器我们还可以把代码再做简化：

复制代码 代码如下:

  

• 第一块
  

• 第二块
  

• 第三块
  

• 第四块
  

• 第五块
  

  

CSS可以改成这样：

复制代码 代码如下:

*{margin:0; padding:0; list-style:none;}  
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}  
li:hover {position:relative; z-index:1;}  
li span {display:none;}  
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/CSS"> *{margin:0; padding:0; list-style:none;} li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left;} li:hover { position:relative; z-index:1;} li span {display:none; } li:hover span { display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; } </style> <ul> <li><span>第一块</span></li> <li><span>第二块</span></li> <li><span>第三块</span></li> <li><span>第四块</span></li> <li><span>第五块</span></li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    提示：您可以先修改部分代码再运行
原始阅读：
http://andymao.com/andy/post/67.html