CSS div 覆盖和 jQuery答案

【问题标题】：CSS div overlay and jQueryCSS div 覆盖和 jQuery
【发布时间】：2010-01-24 02:12:13
【问题描述】：

这或多或少是一个CSS 的问题，但我将它与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>

我对 mask div 所做的是试图让它覆盖整个包装器。所以我将它的宽度和高度设置为包装器的高度。这在 Firefox、Chrome 和 Safari 中运行良好。

但是，在 Internet Explorer 中它不起作用。如何制作此叠加层？

我尝试将位置设置为绝对位置，除了一件事外效果很好。在这个面具之上有一些东西正在发生。它的位置是相对的。我将顶部的 z-index 设置为 1000，将掩码设置为 500。但是，Internet Explorer 中似乎存在一个错误，它会自动使绝对 div 位于所有内容之上。

【问题讨论】：

在问题中包含这些元素的 css，只需将其粘贴进去，和/或包含指向您在线获取此内容的链接。
ngreenwood6，如果你不奖励他们的努力，为什么还要有人给你答案？我并不是对你粗鲁或短视，我只是邀请你通过充分参与 StackOverflow 来改善你的体验和他人的体验。
更新了生成源代码输出的代码。这几乎是一个照片库，但我发现的另一个问题是，当我为图像设置点击事件时。但是，当在 ff 中单击图像时，它很好，但在它下面的其他图像中，它会向下移动。我讨厌 IE。我必须将图像保留为相对的，因为由于它在页面上的偏移，我正在相对移动它。绝对搞砸了。
ngreenwood6，小心你对谁粗鲁 :) 以下是可以帮助你解决这个问题的人员列表：stackoverflow.com/badges/116/css 不是很长，但 50% 的名字应该看起来很熟悉： )
再一次，如果您不打算为我的问题做出贡献，请不要回复

标签： jquery css overlay

【解决方案1】：

然而，ie 中似乎存在一个错误，它会自动使绝对 div 位于所有内容之上。

没有。问题在于 Internet Explorer doesn't support the CSS3 opacity tag。您必须将以下样式添加到您的蒙版 DIV 中才能使其在 IE 中也能正常工作：

filter: alpha(opacity=90);

另请阅读here 和here，了解有关如何正确实现不透明度的更多提示。

顺便说一句，您应该减少使用内联样式的频率。它使您的代码混乱且难以调试。

【讨论】：

【解决方案2】：

IE 的哪个版本？无论如何，您可以用另一个绝对对象覆盖您的绝对对象，然后将相对内容放入其中。

【讨论】：

我用的是ie8。我不能使用另一个绝对对象，因为我正在使用的对象是相对的并且必须保持这种状态。我现在正在更新原始代码。