상대절대 돌파할 수 없는 레벨 문제 해결_경험교류

LI를 position:relative;로 설정하면 SPAN의 z-index 값이 아무리 높게 설정되어도 항상 그 뒤에 있는 상위 항목 아래에 있게 됩니다.

z-index 값이 1000에 도달하면 position:absolut가 모두 부모 아래에 저장되어 자식을 쉽게 찾을 수 있습니다. 오랫동안 생각해 봤는데, 근본적인 문제는 같은 위치를 설정하는 것: 같은 레벨의 레이블 간의 레벨은 z-index로 넘을 수 없다는 것입니다. 위의 예에서 첫 번째 LI의 레벨은 항상 다음 LI의 레벨보다 작으므로 LI의 하위 항목에 position:absolute를 설정하여 매우 높은 z-index 값을 제공합니다.

<ul>   
<li>第一块</li>   
<li><span>第二块</span></li>   
<li>第三块</li>   
<li>第四块</li>   
<li>第五块</li>   
</ul>

어쩌면 이렇게 생각할 수도 있습니다. LI에 대해 position:relative를 설정하는 것이 좋지 않을까요? 매우 사실입니다. 다른 LI가 position:relative를 설정하지 않으면 필요한 하위 항목이 모든 콘텐츠 위에 떠 있을 수 있습니다. 그러나 실제로 모든 LI에 범위가 필요하고 속성이 동일해야 한다면 어떻게 될까요? 물론 이 효과가 반드시 필요한 것은 아닙니다. 그러나 우리는 그러한 효과가 필요합니다. 모든 하위 항목은 숨겨지고 마우스 반응이 있을 때 나타나며 모든 콘텐츠 위에 떠 있습니다. 위에서 본 것처럼 자식이 표시될 때 다음 부모 레이블 아래에 눌려지기 때문에 이것이 실제로 골치 아픈 일이라는 것을 알아야 합니다. 이 마우스 응답의 위치 지정 효과를 구현해 보겠습니다.

*{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:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}

연결된 마우스 이벤트를 사용하여 표시 및 숨기기 효과를 완료합니다.

a를 position :relative로 설정합니다. 이러한 방식으로 해당 하위 항목은 상위 항목의 왼쪽 위 모서리를 좌표 원점으로 기준으로 배치됩니다. 그런 다음 범위의 특정 모양과 위치 지정 속성을 설정한 다음 숨깁니다. 그런 다음 A의 의사 클래스:hover를 사용하여 범위를 활성화합니다. 결과를 보면 맨 위에 있어야 할 모든 것이 이제 맨 아래에 있음을 알 수 있습니다. 그렇다면 이 문제를 어떻게 해결해야 할까요? 실제로 CSS로 돌파구를 찾는 것은 불가능합니다. 그래서 우리는 트리거되지 않은 상위 ​​태그에 position:relative 속성이 없도록 만들 수 있는지 생각해 보겠습니다. 이 상위 항목에 해당 값을 할당하시겠습니까? 사실 이렇게 생각하면 기본적으로 모든 문제가 해결될 수 있습니다.

<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>

a:hover의 속성을 position:relative;로 설정하기만 하면 마우스가 트리거될 때만 A가 상대적으로 위치가 지정된 속성이 할당됩니다. 이로써 다른 상위 태그에 의해 차단되는 문제가 해결되었습니다.

*{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;}

물론 IE5와 같은 브라우저가 마음에 들지 않는다면 코드를 단순화할 수도 있습니다.

*{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; }

CSS를 다음과 같이 변경할 수 있습니다.

추가:

<ul>   
<li><span>第一块</span></li>   
<li><span>第二块</span></li>   
<li><span>第三块</span></li>   
<li><span>第四块</span></li>   
<li><span>第五块</span></li>   
</ul>

얼마 전 '위치:상대/절대 돌파 불가'라는 기사가 나온 적이 있는데, 며칠 전에 다시 읽어보니 그 기사가 아니더군요. 철저하고 핵심을 지적하지 않았습니다. 따라서 위치에 있는 레벨을 좀 더 명확하고 명확하게 설명할 수 있기를 바라며 여기에 특별한 보충 자료를 작성하고 싶습니다.

우리 모두는 위치에 4가지 다른 값이 있다는 것을 알고 있습니다. 즉, 정적 절대 | 상대값입니다. 이는 Su Yu의 "CSS2 중국어 매뉴얼"에 설명되어 있습니다. 정적: 특별한 위치 지정이 없으며 개체는 HTML 위치 지정 규칙을 따릅니다. 절대: 문서 흐름에서 개체를 드래그하고 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 사용하여 절대값으로 만듭니다. 위치. 그리고 계단식은 z-index 속성을 통해 정의됩니다. 이때 개체에는 여백이 없지만 여전히 패딩과 테두리가 있습니다. 개체는 쌓일 수 없지만 왼쪽, 오른쪽, 위쪽, 아래쪽 등과 같은 속성을 기반으로 일반 문서 흐름에서 오프셋됩니다. .; 수정됨: IE5.5 및 NS6은 아직 사용할 수 없습니다. 이 속성은 지원되지 않습니다.

*{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; }

그러나 객체의 스택 위치를 변경하려면 또 다른 CSS 속성인 z-index가 필요합니다. 그러나 이 Z-색인은 전능하지 않습니다. HTML 코드 수준에 의해 제한됩니다. Z-index는 동일한 레벨의 HTML에만 그 효과를 반영할 수 있습니다. 여기서 꼭 언급해야 할 점은 z-index는 객체의 위치 값이 상대/절대일 때만 사용할 수 있다는 것입니다. 아래에서는 레벨의 특성을 설명하는 몇 가지 예를 제공합니다.


위 HTML 코드의 경우 이를 정의하기 위해 CSS도 작성해야 합니다.

이는 다음과 같습니다. 가장 일반적인 경우는 #a, #b의 stacking level을 z-index를 통해 설정할 수 있다. 이것은 묻지 않는데 어떤 상황에서 문제가 발생합니까? 또 다른 예를 살펴보겠습니다.

<p id="box_1">   
<p id="a">这是第一个块</p>   
<p id="b">这是第二个块</p>   
</p>

이 CSS의 차이점에 주의하세요.

#a,#b {position:absolute; width:300px; height:100px; }   
#a {z-index:10; left:0; top:0; background:#000; }   
#b {z-index:1; left:20px; top:20px; background:#c00; }

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}   
#a, #b {position:absolute; width:100px; height:300px; }   
#a {background:#c00; z-index:100; }   
#b {background:#0c0; z-index:1; left:50px;}

       这时候我们看,不论#a设为多大的值,他都无法超过#b,所以说z-index是无法冲破HTML的等级的,他必需是要同等级的状态下才可以发挥威力.那么如何解决这个问题呢?我可以反过来想,堂兄弟之间的顺序不能被重组,何不把父辈的等级做一次重组呢?所以我们把#box_1的CSS中加入一个z-index:100; 在#box_2的CSS中加入z-index:1;这样再看一下效果: 

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}   
#box_1 {z-index:100;}   
#box_2 {z-index:1;}   
#a, #b {position:absolute; width:100px; height:300px; }   
#a {background:#c00; }   
#b {background:#0c0; left:50px;}