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 make colors generated via Javascript be stored permanently in CSS file with or without use of PHP

    How do I get Html Table to respect margins when its width is set to 100%?

    two divs in one div with img in each two, how to autoresize but keep row formation?

    How to align 2 content blocks horizontally in css without using s
    If you can change your markup, just one line of CSS is enough to achieve this through flexbox. Wrap both the items inside a parent container. Set display: flex to...
    Read more

    How to add comments to inline CSS? [closed]

    How to echo CSS class only once in first iteration foreach in PHP?

    How to set size of SVG image in :before pseudo-class?

    How to make css border like this? [closed]

    How to add more items to the list without going to the next row? [closed]

    How to pull css properties along with html content in Ajax?

    how to target IE 6 AND IE7 in css

    Bootstrap How-to: checkbox should change text input value when selected/checked [closed]

    how to implement background img

    How to make an image fully flexible in terms of display size?

    xHTML/CSS: How to make inner div get 100% width minus another div width

    How to control css of images on top of a full page semi-transparent overlay div

    How do I make
  • with block elements sit beside each other?
  • How to apply row virtualization for a table / list in HTML/CSS/JS? [closed]

    How to make a grid (like graph paper grid) with just css?

    How to create a fluidic list using css

    How to scale a .svg being the background in a div?

    How to get floated divs align to the top?

    How to setup counters for target-counters

    Always show hover text in an appropriate position

    How can I limit Bootstrap column to a specific column's height?

    Using a lot of style sheets. Needing opinions on how to move forward efficiently

    How to build HTML email using CSS?

    How to hook up CSS search bar to JavaScript or another server side language

    How to embedded all resources(css,js,images) into one single html file?

    How to style an anchor tag to look like a button with the same height as the button?