javascript - Displaying an element outside overflow hidden container -

javascript - Displaying an element outside overflow hidden container -

i have <table> made scrollable wrapping in <div> of fixed height.

this <table> has dropdown component (blue container in 2nd column of 1st row in image , jsfiddle given below) hiding behind container <div>. want display options instead.

jsfiddle (example)

how should bring dropdown component outside container <div> display options in image below?

if remove prelative container, dropdown visible - when scroll, dropdown not scroll along it's container.

thanks in advance.

ps: looking css/javascript solution only.

you can alter positioning of dropdown fixed , handle scroll using js, following.

.pabsolute { position: fixed; } var main = document.getelementsbyclassname('main')[0]; var dd = document.getelementsbyclassname('pabsolute')[0]; var offset = dd.getboundingclientrect().top; main.onscroll = function () { var st = main.scrolltop; dichloro-diphenyl-trichloroethane = (offset-st); dd.style.top = dichloro-diphenyl-trichloroethane + 'px'; } demo

update

you can prepare margin-top issue creating new stacking context.

(tested in safari 6.1 mac - unfortunately doesn't works in latest browsers) updated demo or another demo

update

the possible cross browser workaround find hiding fixed elements overflow clip container (this requires positioned element)

.main { position:absolute; clip: rect(auto, auto, 99999px, auto); // apply big bottom value you're dropdown won't reach avoid clipping } demo

javascript html css