1. 首頁
  2. 問答
  3. z-index - 固定，絕對，相對

z-index - 固定，絕對，相對

2011-05-12 62 views
0

「div.dialog」中的z-index似乎不影響圖層索引？在「div.dialog」分區必須是一切的頂部z-index - 固定，絕對，相對

編輯：

  • div.dialog_bg必須在後臺
  • #topfix必須是重要的是
  • div.dialog頂部有是一切

代碼的頂部...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
    <body style="margin:0px"> 
     <style> 
      #topfix { 
       position:fixed; 
       top:0px; 
       left:0px; 
       width:100%; 
       height:130px; 
       z-index:1; 
       background:#ff0000; 
      } 

      #div_dialog { 
       position:relative; 
       z-index:1; 
      } 

      div.dialog { 
       position:absolute; 
       background:#ffffff; 
       border:1px solid #000000; 
       width:400px; 
       height:300px; 
       top:50px; 
       left:100px; 
       z-index:99; // doesnt seem to influ the layer index 
      } 

      div.dialog_bg { 
       position:absolute; 
       background:#ffff00; 
       width:100%; 
       height:500px; 
       opacity:0.3; 
      } 
     </style> 

     <div id="div_dialog"> 
      <div class="dialog_bg"></div> 
      <div class="dialog">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</div> 
     </div> 
     <div id="topfix"> 
      topfix 
     </div> 
    </body> 
</html>

來源

2011-05-12 clarkk

回答

6

那麼您需要給它的父母#div_dialog至少z-index: 2，因爲z-index是相對於其父親的而dialog是#div_dialog的唯一孩子。

另外z-index: 1對於#div_dialog是不夠的，因爲#topfix在HTML之後，並且將被放置在#div_dialog之上。

編輯

所以，關於你的「新」，你必須給

#div_dialog { 
    position: absolute; 
    z-index: 9999; 
} 
.dialog_bg { 
    z-index: 1; 
} 
.dialog { 
    z-index: 2; 
}

來源

2011-05-12 09:20:45 DanielB

+0

我已在描述了些許變化 – clarkk 2011-05-12 09:34:15

相關問題

 相關問題