jQuery工具叠加CSS冲突，图像定位在叠加层下答案

【问题标题】：Jquery tools Overlay CSS Conflict, Image positioned under the overlayjQuery工具叠加CSS冲突，图像定位在叠加层下
【发布时间】：2009-09-12 18:27:42
【问题描述】：

首先这是我正在使用和尝试做的事情：

此效果的最小设置： flowplayer.org/tools/demos/overlay/index.html

然后是 Apple Leopard 预览效果： flowplayer.org/tools/demos/overlay/apple.html

现在这是我遇到问题的页面 http://gentle-mist-64.heroku.com/pictures

我的问题：当我点击图片时，图片显示在覆盖下方和右侧，

这一定是我的 CSS 定位与插件定位之间的冲突。

当我在没有布局的空白页面上尝试这个时，它工作得很好。

我的布局 css：

body {
  background: url('/images/background.jpg');
}

#image_stage {
  position: relative;
  top: 30px;
  margin: auto;
  margin-top: 75px;
  background-color: white;
  width: 900px;
  height: 520px;
}

#image_inside_stage {
  float: left;
  margin-top: 7px;
  margin-left: 27px;
}

#logo {
  position: absolute;
  left: 725px;
  top: 4px;
}

#see_through_box {
  position: absolute;
  background-color: black;
  opacity: 0.66;
  -moz-opacity: 0.66;
  filter:alpha(opacity=66);
  width: 665px;
  height: 432px;
  margin: 45px;
  z-index: 99;

  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 15px;

  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 15px;
}

.inner_content {
  position: absolute;
  top: 75px;
  left: 75px;
  z-index: 99;
  color: whitesmoke;
}

请大家帮忙。我想让这个插件工作。这比一个灯箱插件要好得多。我在整个网站上都使用了该插件，并希望继续使用它。

感谢您的任何意见，谢谢。阿米

【问题讨论】：

如果您使用的是 FireFox，您能否利用 FireBug 查看在浏览器中打开时计算出的样式是什么？这可以帮助您了解真正有助于您的样式的因素。如果一切都失败了，您可以在自己的 CSS 声明中添加一些 !important 子句。

标签： css jquery-tools

【解决方案1】：

您能否尝试将photo0 和photo1 移动到不在您的其他div 中，而是让它们不会受到任何父/继承样式的影响？也许在关闭 </body> 标记之前下降？

祝你好运！

【讨论】：

我通过删除所有定位并使用浮动和背景图像而不是计算的 div 框的位置和大小解决了这个问题，所以它现在可以工作了非常感谢

【解决方案2】：

感谢您提供的线索！我遇到了类似的问题，最终发现 jquery 工具正在写出主体底部的覆盖图像，这意味着它的样式与在不同位置创建的 div 略有不同。查看将图像放在那里的 javascript，我对覆盖 div 做了同样的事情

$('body').append($('#mortgage_card'));

【讨论】：

【解决方案3】：

我发现完全对于 jquery 工具来说，不要将 jquery 工具元素放在绝对定位的父元素中是非常重要的。

您可以简单地将窗口、可滚动窗口或任何东西放在绝对父级之外。

如果可以的话，最好使用浮动定位。

【讨论】：

【解决方案4】：

如果你想保持你的元素定位，你实际上可以通过移动覆盖元素来解决它，正如 Funka 所建议的那样。看到这个答案：

jquery overlay wrong positioning

【讨论】：