我想知道如何在不影响页面中其他元素的布局的情况下扩展“div”。具体来说，我想实现类似于http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/的效果。如果你将鼠标悬停在任何产品上，你会看到框展开显示更多的信息;但是，其他元素（如下面的产品图像）不受扩展的影响。
我想知道如何在不影响页面中其他元素的布局的情况下扩展“div”。具体来说，我想实现类似于http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/的效果。如果你将鼠标悬停在任何产品上，你会看到框展开显示更多的信息;但是，其他元素（如下面的产品图像）不受扩展的影响。
5条答案
按热度按时间koaltpgm1#
使用绝对位置。
相反，你也可以通过在div上写入onhover事件，并在该位置添加一个具有更高z索引的额外div来实现相同的效果。
fcipmucu2#
使用绝对定位，然后你可以放大/缩小div，它不会影响周围的任何其他元素。
ma8fv8wu3#
将
position:absolute;添加到div的样式中。这样，它不会干扰其他元素，但仍然与它们重叠，并且您可以为它们指定任何宽度和高度。fykwrbwg4#
绝对定位你的div，并确保z索引位于顶层。它可以使用CSS来完成，但使用js可能会更容易。
91zkwejq5#
你可以使用transform：scale（x）;在不影响其他元素的情况下放大/缩小div。