z-index的問題

我知道這裏有很多關於z-index的問題，但我現在使用z-index一段時間，它總是運行正常，但現在我在這個問題上掙扎着，我只是不明白爲什麼它不起作用，因爲我認爲我做了所有必要的步驟。z-index的問題

的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

.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; 
}

所以我想這個.boxGrid類是.buttonBack類上面，我加了position:屬性，所有div的是使用z-index。

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.buttonBack作爲一個孩子的div.boxGrid。您可能需要重新排序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-index爲父母，孩子也會受到影響。讓他們成爲兄弟姐妹。

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

看這個的jsfiddle：http://jsfiddle.net/ZwC9n/

來源

2012-12-14 16:59:23 Nashi

當然...我怎麼會這麼愚蠢？：）謝謝！我沒有清楚地想到......我會接受Pais的回答，只是因爲他早些時候。不知道該選哪個。 :) – avb

感謝接受！有些時候，我們的思想可能會因爲盯着代碼太久而變得混亂。 – Pais

回答

相關問題