CSS div覆蓋和jQuery

這或多或少是一個CSS問題，但我使用它與jQuery。好的，所以基本上我的是這樣的：CSS div覆蓋和jQuery

<div 
    style="overflow: hidden; width: 1000px; height: 450px; background-color: rgb(0, 0, 0); position: relative;" 
    id="wrapper"> 
    <div 
     style="background-color: rgb(255, 255, 255); opacity: 0.9; top: 0pt; left: 0pt; width: 1000px; height: 450px; position: absolute; z-index: 500;" 
     id="mask"></div> 
    <div 
     class="ui-draggable" 
     style="margin: 60px auto auto; position: relative; width: 1550px; height: 340px;" 
     id="test"> 
     <div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row"> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Chrysanthemum.jpg"></div> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Desert.jpg"></div> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Hydrangeas.jpg"></div> 
     </div> 
     <div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row"> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Jellyfish.jpg"></div> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Koala.jpg"></div> 
      <div 
       style="width: 100px; height: 100px; margin-top: 10px; position: relative;" 
      ><img 
       style="width: 100px; height: 100px; position: relative;" 
       class="img" 
       src="/images/Lighthouse.jpg"></div> 
     </div> 
    </div> 
</div> 
<div 
    style="position: absolute; left: 978px; top: 223px; color: rgb(255, 255, 255);" 
    id="next-btn">Next</div> 
<div 
    style="position: absolute; left: 8px; top: 223px; color: rgb(255, 255, 255);" 
    id="prev-btn">Prev</div>

我正在做的面具div試圖讓它覆蓋整個包裝。所以我將其寬度和高度設置爲包裝的高度。這在Firefox，Chrome和Safari中運行良好。

但是，在Internet Explorer中它不起作用。我怎樣才能做出這個覆蓋？

我試圖設置位置爲絕對的工作正常，除了一件事。這個面具上面有一些東西。它的立場是相對的。我將頂層設置爲z-index 1000，將掩碼設置爲500.但是，Internet Explorer中似乎存在一個錯誤，它會自動使絕對div位於所有內容之上。

來源

2010-01-13 ngreenwood6

包括問題中這些元素的CSS，只需粘貼它，和/或包含一個鏈接到您在線的位置。 – 2010-01-13 05:18:48

ngreenwood6，如果你不獎勵他們的努力，爲什麼有人會給你答案？我不會對你粗魯無禮，我只是邀請你通過完全參與StackOverflow來更好地體驗他人的經驗。 – Sampson 2010-01-13 05:22:29

已更新的代碼與生成的源的輸出。這幾乎是一個照片庫，但我發現另一個問題是，當我設置圖像的點擊事件。但是，當圖像被點擊時，它會很好，但是在其他圖像下面，它會向下移動。我恨IE。我必須將這些圖像作爲相對的圖像，因爲我在頁面上偏移了相對位置。絕對把它擰緊。 – ngreenwood6 2010-01-13 05:33:14

但是，它似乎有一個在ie中的錯誤，自動使一個絕對的div在一切的頂部。

不是。問題是，Internet Explorer doesn't support the CSS3 opacity tag。你必須將以下樣式添加到您的面具DIV使它在IE工作太：

filter: alpha(opacity=90);

又讀here和here關於如何正確地貫徹執行不透明的提示。

在旁註中，您應該少用一次內聯樣式。它使你的代碼混亂，難以調試。

來源

2010-01-20 16:10:42 thomaspaulb

哪個版本的IE？無論如何，您可以將絕對對象與另一個絕對對象疊加，然後將相對內容放入其中。

來源

2010-01-13 05:19:47 SpliFF

我正在使用ie8。我不能使用另一個絕對對象，因爲我使用的對象是相對的，必須保持這種方式。我正在更新原始代碼。 – ngreenwood6 2010-01-13 05:25:23

CSS div覆蓋和jQuery

回答

相關問題