jquery - How do i position a div relative to the window page (responsive css) -

jquery - How do i position a div relative to the window page (responsive css) -

so made button hides , shows div placeholder text:

<button id="btn1">click display div1</button> <div id="div1"></div>

the #div1 positioned absolute cause don't want fixed.

when click button how create appear within window screen? , has 10px top window screen?

and additional question how center div?

here fiddle

try

$("#btn1").click(function(){ $("#div1").css("top",($(document).scrolltop() + 10) +'px').fadetoggle(); });

to create div in center

#div1{ position:absolute; background-color:#007c7c; width:500px; height:500px; color:white; left:50%; margin-left:-250px; }

working demo

jquery html css