javascript - How to expand a DIV without affecting other elements - Stack Overflow

admin管理员组

文章数量:1339474

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 - /. 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.

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./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.

• javascript
• jquery
• css

Share Improve this question Follow edited Jan 13, 2018 at 8:46 ROMANIA_engineer 56.7k3030 gold badges209209 silver badges205205 bronze badges asked Sep 13, 2012 at 7:08 user1664185user1664185 7111 gold badge22 silver badges33 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

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.

use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.

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.

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.

you can use transform: scale(x); to grow/shrink the div without affecting the other elements.

本文标签： javascriptHow to expand a DIV without affecting other elementsStack Overflow