z- 인덱스 문제

여기에 z- 인덱스에 관한 많은 질문이 있습니다.하지만 잠시 동안 z- 인덱스를 사용하고 있으며 항상 정상적으로 작동했지만 지금은이 문제에 대해 고심하고 있습니다. 나는 모든 필요한 조치를 취했다고 생각하기 때문에 왜 효과가 없는지 이해하지 못합니다. 나는이 .boxGrid 클래스는 .buttonBack 클래스 위가되고 싶어요 그래서z- 인덱스 문제

.boxGrid 
{ 
    width: 226px; 
    height: 246px; 
    background-image: url(buttonBorder.png); 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 100; 
} 

.buttonBack 
{ 
    position: absolute; 
    top: 12px; 
    left: 13px; 
    border: 0px; 
    width: 200px; 
    height: 223px; 
    z-index: 50; 
    overflow: hidden; 
} 

.blogImg 
{ 
    background-image: url(blogButton.png); 
} 

.boxCaption 
{ 
    position: absolute; 
    background: url(caption.png); 
    height: 121px; 
    width: 100%; 
    bottom: -121px; 
    text-align: center; 
} 

.boxCaption h3 
{ 
    font-size: 30px; 
    color: #fff; 
}

test.html를

<!DOCTYPE html> 
<html> 
    <head> 
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
     <meta content="utf-8" http-equiv="encoding"> 

     <link href="style.css" rel="stylesheet" type="text/css" /> 

     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js " type="text/javascript"></script> 
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script> 
     <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script> 

     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('.boxGrid').hover(function(){ 
        $(".boxCaption", this).stop().animate({bottom:'0px'},{queue:false,duration:300}); 
       }, function() { 
        $(".boxCaption", this).stop().animate({bottom:'-121px'},{queue:false,duration:300}); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div style="position: relative; width: 226px; height: 246px;"> 
      <div class="boxGrid"> 
       <div class="buttonBack blogImg"> 
        <div class="boxCaption"> 
         <h3>Top-Blog</h3> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

있는 style.css, 나는 모든 사업부 년대에 position: 속성을 추가 Z- 인덱스 사용.

JsFiddle 그래서 빨간색 상자는 파란색 배경 뒤에 있어야합니다. 사전

출처

2012-12-14 avb

최소한의 jsfiddle을 만들 수 있습니까? 아침 일찍 이걸 조금이라도 소화 할게 많네 – thatidiotguy

@thatidiotguy 내 업데이트 된 답변보기 – avb

하위 요소는 부모 요소에 상대적으로 스택됩니다. http://stackoverflow.com/questions/6493865/z-index-how-to-make-nested-elements-appear-underneath-their-parent-element 해결 방법은'.buttonBack'을'외부로 이동하는 것입니다. boxGrid' – Jrod

당신은 div.boxGrid에 자식으로 div.buttonBack 있습니다. HTML을 재정렬해야 할 수도 있습니다.

<div style="position: relative; width: 226px; height: 246px;"> 
    <div class="buttonBack></div> 
    <div class="boxGrid"> 
     <div blogImg"> 
      <div class="boxCaption"> 
       <h3>Top-Blog</h3> 
     </div> 
    </div> 
</div>

출처

2012-12-14 17:09:07 Pais

에서

덕분에 당신은 부모 아래에 있지 "숨기기"자식 요소, 당신은 부모에 대한 Z- 인덱스를 설정하는 경우 때문에, 아이도 영향을받습니다 수 있습니다. 그냥 형제로 만들어라. 이 jsfiddle에서

<div style="position: relative; width: 226px; height: 246px;"> 
    <div class="boxGrid"></div> 
    <div class="buttonBack blogImg"> 
     <div class="boxCaption"> 
      <h3>Top-Blog</h3> 
     </div> 
    </div> 
</div>

봐 : http://jsfiddle.net/ZwC9n/

출처

2012-12-14 16:59:23 Nashi

물론 ... 내가 어리석은 짓을 했을까? :) 감사! 나는 분명히 생각하지 못했습니다. Pais의 대답을 받아 들일 것입니다. 어느 것을 선택할 지 모른다. :) – avb

감사합니다! 때때로 우리의 마음은 너무 오랫동안 코드를 쳐다 보면서 혼란 스러울 수 있습니다. – Pais

z- 인덱스 문제

답변

관련 문제