title: How to make a floating div which show another div when we click it
body: <p>I am trying to create a div (<strong>show</strong>) at top-right of the window which look like button. If the user click it then another div (<strong>form</strong>) should open up along with div (<strong>show</strong>) sliding down. So i used jquery slideToggle to Take Care of it. Now, if I click the div (<strong>show</strong>) it slideToggle div (<strong>form</strong>) but this two divs moves the third div (<strong>ano</strong>) down. That is this two affect other divs. I want this two div open up like a slider without affecting other I guess it should come at the top index. Here is the code</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
        .ano {
           background-image:url('pic1.jpg');
           position:
         }
        .show {
           display: block;
           margin-top: -10px;
           background-image:url('button.png');
           margin-left: 85%;
           background-repeat:no-repeat; 
         }
        .form {
           display: block;
           margin-top: -10px;
           background-image:url('slider.png');
           background-repeat:no-repeat;
           margin-left: 85%;
         }
        body {
           background-image:url('bg.jpg');
        }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
     &lt;div class="form"&gt;
       Here are some content
     &lt;/div&gt;
     &lt;div class="show"&gt;
       click me
     &lt;/div&gt;
     &lt;div class="ano"&gt;
       different div
     &lt;/div&gt;
  
  &lt;script&gt;
     $(".show").click(function() {
       $(".form").slideToggle();
     });
  &lt;/script&gt;
  </code></pre>
  
  <p>
     </p>