将一个 div 扩展以覆盖另一个 div

Question

我正在使用jQuery来实现鼠标悬浮时扩展一个div，使其覆盖整个页面宽度。其中包含一个大表格，我需要为低分辨率构建此页面，但实际上每个人都有更高的分辨率，因此这是一种可接受的解决方法。我的问题是该div会跳下到其他div下面，而不是像我想要的那样覆盖它们。有人知道如何实现吗？

我已经在jsfiddle上创建了一个示例，以便您可以了解主要想法：http://jsfiddle.net/MRNxt/1/ 将鼠标悬停在灰色框上并使其向右扩展，覆盖侧边栏中的#asd2，而不是下面。

- olofom

Answer 1

请查看这个示例：http://jsfiddle.net/MRNxt/4/

解决方案涉及在扩展时将日志div设置为绝对定位，折叠时取消绝对定位。还包括一个小修复以避免动画闪烁。

- techfoobar

---

这个很好用，但我改变了动画变量并使用了filter(':not(:animated)')代替：http://jsfiddle.net/MRNxt/9/ - olofom

Answer 2

使用类似于lightbox/thickbox这样的东西不适合吗？

或者，您需要尝试绝对定位和z-index。我建议在处理动画之前先确定理想布局。在CSSEdit/Firebug/任何其他工具中将其组合在一起，以便您的框正好放置在您想要它们的位置，然后添加到动画脚本中就很简单了。

或者只需使用现成的lightbox。

- Charles Bandes

---

布局已经完成，动画并不是重要的事情，重要的是它能够在其他窗口之上显示。我使用fancybox来处理一些东西，但这需要始终可见，而无需点击任何地方。 - olofom

不，我的意思是建立第二个布局——放大所有内容的布局。这样你就会知道需要过渡到哪些CSS。一旦完成了这个步骤，一切都会变得简单。 - Charles Bandes

啊，好的，我明白了。是的，那可能是最好的方法，但这是唯一需要完成的事情，所以现在已经完成了。如果它不应该成为内部工具，那么是的，那就是正确的方式。 - olofom

Answer 3

这不会是完美的答案：

http://jsfiddle.net/MRNxt/7/

但是在这里，我使用了一个子容器来允许您拥有100%的宽度和一些边框。

- BiAiB

---

不幸的是，这并没有比我的原始解决方案更好。 - olofom

Answer 4

请添加以下 CSS：

#asd2{
 position:absolute;
 z-index:-1;        
}
#log{
    background:white;
}

示例：http://jsfiddle.net/MRNxt/2/

- Puyol

---

谢谢，这很有效，但仅适用于#asd2，如果#asd是多行，则会使其跳转。我需要一个动态的解决方案，因为我不知道框中的内容（实际系统中有更多框）。 - olofom