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

回答

相关问题