I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.
我想知道如何在不影响页面中其他元素布局的情况下扩展“div”。具体来说,我想达到类似的效果 - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/。如果您将鼠标悬停在任何产品上,您会看到该框展开显示更多信息;但是,其他元素(如下面的产品图片)不受扩展影响。
4 个解决方案
#1
7
use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.
使用绝对位置。相反,您也可以通过在div上写入onhover事件来实现相同的效果,并在该位置使用更高的z-index添加额外的div。
#2
1
use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.
使用绝对定位,然后你可以增长/收缩div,它不会影响它周围的任何其他元素。
#3
1
Add position:absolute;
to style of your div. This way it won't interfere with other elements but still overlap them, and you can specify any width and height to them.
添加位置:绝对;你的div的风格。这样它不会干扰其他元素但仍然重叠它们,您可以指定它们的任何宽度和高度。
#4
0
Absolutely position your div and make sure the z-index is at the top level. It CAN be done using just CSS, but it'll probably be easier with js as well.
绝对定位你的div并确保z-index处于顶层。它可以使用CSS完成,但是js也可能更容易。
#1
7
use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.
使用绝对位置。相反,您也可以通过在div上写入onhover事件来实现相同的效果,并在该位置使用更高的z-index添加额外的div。
#2
1
use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.
使用绝对定位,然后你可以增长/收缩div,它不会影响它周围的任何其他元素。
#3
1
Add position:absolute;
to style of your div. This way it won't interfere with other elements but still overlap them, and you can specify any width and height to them.
添加位置:绝对;你的div的风格。这样它不会干扰其他元素但仍然重叠它们,您可以指定它们的任何宽度和高度。
#4
0
Absolutely position your div and make sure the z-index is at the top level. It CAN be done using just CSS, but it'll probably be easier with js as well.
绝对定位你的div并确保z-index处于顶层。它可以使用CSS完成,但是js也可能更容易。