javascript，css，z-index，div堆棧

我想創建一種僅在頁面內的單個DIV上起作用的輕/粗框。當我的第一個div（phantom_back）觸發時，按照我想要的但第二個，phantom_top在phantom_back之後設置其自身，無論其z-index和定位如何。javascript，css，z-index，div堆棧

我在做什麼錯？

這是我到目前爲止有：

<html> 
<head> 
    <script type="text/javascript"> 
    <!--// 
     function phantom_back(image) 
     { 
      document.getElementById('phantom_back').style.zIndex = 100; 
      document.getElementById('phantom_back').style.height = '100%'; 
      document.getElementById('phantom_back').style.width = '100%'; 
      phantom_top(); 
     } 

     function phantom_top(image) 
     { 
      document.getElementById('phantom_top').style.zIndex = 102; 
      document.getElementById('phantom_top').style.height = 600; 
      document.getElementById('phantom_top').style.width = 600; 
      document.getElementById('phantom_top').style.top = 0; 
      document.getElementById('phantom_top').style.left = 0; 
     } 
    //--> 
    </script> 
</head> 
<body> 
    <a href="#" onclick="phantom_back()">Change</a> 

    <div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord"> 
     <div style="height: 10px; width: 10px; position: relative; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div> 

     <div style="height: 10px; width: 10px; position: relative; z-index: -3; margin: 0 auto; background-color: green;" id="phantom_top">asdf</div> 
    </div> 

</body> 
</html>

，我很困惑，爲什麼沒有我已經能夠找到的報價是這樣的教程。

來源

2009-02-09 aggitan

所以，我明白了。我在phantom_back上設置了一個絕對定位，而不是試圖重新設置它們，我只是設置了可見性。當我試圖設置Z指數時，它會在我身上分崩離析。

<html> 
<head> 
    <script type="text/javascript"> 
    <!--// 
     function phantom_back(image) 
      { 
       document.getElementById('phantom_back').style.height = 700; 
       document.getElementById('phantom_back').style.width = 700; 
       document.getElementById('phantom_back').style.zIndex = 50; 
       phantom_top(); 
      } 

     function phantom_top() 
      { 
       document.getElementById('phantom_top').style.height = 600; 
       document.getElementById('phantom_top').style.width = 600; 
       document.getElementById('phantom_top').style.visibility = "visible"; 
      } 
    //--> 
    </script> 
</head> 
<body> 
    <a href="#" onclick="phantom_back()">Change</a> 

    <div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord"> 
     <div style="height: 10px; width: 10px; position: absolute; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div> 

     <div style="margin: 0 auto; text-align: center; height: 10px; width: 10px; position: relative; z-index: 102; top: 10px; background-color: white; visibility: hidden;" id="phantom_top"><br /><br /><img src="load.gif"></div> 
    </div> 

</body> 
</html>

來源

2009-02-09 20:35:04 aggitan

phantom_top設置爲位置：相對不絕對，因此它當前不重疊phantom_back。

來源

2009-02-09 19:19:05 Jason

我有一個phantom_back底部的phantom_top調用。我做錯了嗎？ – aggitan 2009-02-09 19:33:47

不要忘記串聯一個px字符串的高度和寬度。你不需要像素爲Z指數

document.getElementById('phantom_back').style.height = 700 + "px";

就像那樣。

來源

2014-07-01 11:13:39 Slain

javascript，css，z-index，div堆棧

回答

相關問題