如何在不影响其他元素的情况下扩展DIV

Question

我想知道如何在不影响页面中其他元素布局的情况下扩展'div'。具体来说，我想达到与此类似的效果 - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/。如果将鼠标悬停在任何产品上，您会看到该框展开显示更多信息;但是，其他元素（如下面的产品图片）不受扩展影响。

Answer 1

使用绝对位置。
相反，你也可以通过在div上使用悬停事件来创建相同的效果，并在该位置添加一个具有更高z-index的额外div。

Answer 2

使用绝对定位，然后你可以增长/缩小div，它不会影响它周围的任何其他元素。

Answer 3

将position:absolute;添加到div的样式中。这样它就不会干扰其他元素，但仍会与它们重叠，你可以为它们指定任何宽度和高度。

Answer 4

绝对定位你的div并确保z-index处于顶层。它可以使用CSS完成，但js也可能更容易。