javascript - Overlapping dropdown -

i want embed dropdown div in wrapper div has 0 height, takes no space whether or not shown, , when shown, overlays contents placed below. suppose dropdown element div content foo. did like:

html

<div class="dropdown_wrapper">   <div id="dropdown_content">foo</div> </div> 

css

.dropdown_wrapper{   height: 0;   overflow: visible; } 

and through javascript, switched #dropdown_content's style between display: block , display: none. when former, expect content shown, not shown, hidden within wrapper div has 0 height.

how can fixed?

you not want wrapper use space in document. use anchor point use

position: absolute; overflow: visible; 

on wrapper. way content set it's own bounding box.

the rest seems work intended. check fiddle