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


Tags: jquery,html,css

Problem :

so i made a button that hides and shows a div with placeholder text:

<button id="btn1">Click to display div1</button>
<div id="div1"></div>

the #div1 is positioned as absolute cause i don't want it fixed.

When i click my button how do I make it appear within the window screen? and has 10px top from the window screen?

and additional question how do i center that div?

Here is the Fiddle



Solution :

Try this

$("#btn1").click(function(){

  $("#div1").css("top",($(document).scrollTop() + 10) +'px').fadeToggle(); 

});

to make div in center

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

Working DEMO


    CSS Howto..

    How to overlap divs using CSS?

    How to show borders of th elements with gradient fills in IE9?

    CSS How to properly replace links by button background

    How do I get form-groups to overlap?

    How to vertically align numbers of ol?

    How to get a child element to size according to parent's min-height?

    How to make all images look same

    How to dynamically pass variables from HTML to CSS [closed]

    How to apply this CSS class to a given LinkButton?

    How to embed SVG styling with javascript?

    How to center multiple divs inside a container in CSS

    How do you get this result, using Jquery Scroll Event & offset/position, css or javascript?

    How to create a full width background image with a variable height depending on content?

    How to display search icon on right side through css?

    How to create an HTML CSS Page with Header, Footer and Content

    How to click and swap a text in a button?

    Box-shadow is overlapping other elements, how can I fix it?

    CSS. Show TFOOT only when TBODY has no rows

    How To Make Navigation With Images That Is Clickable?

    How to create radio button as buttons?

    How to create desired shapes and position them accordingly using CSS, CSS3?

    How to loop this css slider animation?

    How to display html with css stylesheet in TextView?

    How to place rectangle inside image and make hover animation for it in CSS?

    How to apply a line wrap/continuation style and code formatting with css

    How to make multiple breaks using CSS?

    How can I use CSS borders to visually group my sections?

    How can I get divs inside a div to continue on a new row when the current row (screen horizontally) is full?

    Show Div When Click Link Button

    CSS How to apply child:hover but not parent:hover