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

How to expand a DIV without affecting other elements

本文关键字：情况下扩展 DIV 元素其他影响更新时间：2023-09-26

我想知道如何在不影响页面中其他元素布局的情况下扩展"div"。具体来说，我想达到类似的效果——http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/.如果你把鼠标悬停在任何产品上，你会看到盒子展开，显示更多信息；然而，诸如下面的产品图像之类的其他元素不受扩展的影响。

使用绝对位置
相反，您也可以通过在div上编写onhover事件来获得相同的效果，并在z索引较高的位置添加一个额外的div。

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

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

绝对定位您的div，并确保z索引处于顶级。只使用CSS就可以完成，但使用js可能也会更容易。

您可以使用transform:scale（x）；以在不影响其他元素的情况下增大/缩小div。