사람들은 div CSS를 작성할 때 팝업 레이어를 사용하는 경우가 많습니다. IE6의 버그로 인해 여러 태그를 사용하여 팝업 레이어를 반복적으로 작성하면 후속 레이어가 팝업 레이어 위에 겹쳐지는 문제가 발생합니다. Firefox에서는 z-index를 사용하여 브라우저에서 해결할 수 있지만 IE6에서는 작동하지 않습니다. 다음 코드는 이러한 종류의 문제에 대한 솔루션을 제공합니다. 원칙은 다음과 같습니다. 팝업 레이어의 z축이 매우 간단합니다. 호호!
.org/1999/xhtml">
팝업 레이어 문제 해결 방법 제목> <br>.box { width:800px; margin:10px auto; z-index:0; ;} <br>.box ul li { width:150px; height:left; border:solid 1px #ccc; margin:10px ; 목록 🎜>.box ul li .layer { 위치:절대:150px; 높이:100px; 색상:# fff:99999;} ;/style> <br><script src="jquery-1.3.2.min.js" type="text/javascript"></script> <br> body> <br><div class="box"> <br><ul id="boxcotent">
<br><li> /a> <br><div class="layer" style=" display:none;"> <br><a href="#"> </a>
</div> <br>
</li> <br><li>
<a href="#">테스트 뉴스 제목 1</a> <br><div class="layer"> <br><a href="#">팝업 레이어가 여기에 표시됩니다.</a> <br> ><li>
<a href="#">테스트 뉴스 제목 1</a> <br><div class="layer" style=" display:none;"> href="#">팝업 레이어가 여기에 표시됩니다.<br>
</div> <br>
</li>
<br>< ;li><a href="#"> 테스트 뉴스 제목 1</a> <br><div class="layer" style="display:none;"> <br><a href="#">팝업 레이어가 여기에 표시됩니다 a> <br></a>
</div> <br> <br><li>
<a href="#">테스트 뉴스 제목 1</a> ="layer" style=" display:none;"> <br><a href="#">팝업 레이어가 여기에 표시됩니다</a> <br>
</li>
</div> /li> <br>
</li>
<li>
<a href="#">테스트 뉴스 제목 1</a> <br><div class="layer" style="display:none;"> 🎜><a href="#">팝업 레이어가 여기에 표시됩니다</a> <br>
</div> <br>
</li> <br><li>
<a href="#">테스트 뉴스 제목 1</a> <br><div class="layer" style=" display:none;"> <br><a href="#">팝업 레이어 여기에 표시됩니다. <br> <br></a>
</div> javascript"> <br>for(var i = 0; i var j = 10000-i <br>$(".box li" ).eq(i).css("z-index",j); <br>} <br>$("#boxcotent li").hover(function (){ <br>$(this).children( ".layer").show();}, function(){$(this).children(".layer").hide();} <br> ) <br>$("#boxcotent li") .hover(function(){ <br>$(this).addClass("s");},function(){$(this).removeClass("s ");} <br>); ;/script> <br>
</li>
</ul>
</div>
