title: position div to bottom right
body: <p>I am creating facebook like chat in my website.So whenever user clicks to chat to someone the chat window should open in the bottom right corner.The next window should be left to the other opened chat windows.Also the chat windows should not occupy extra height on page.They should just be placed at a higher z-index to overlap the page content behind them.I am not that good in css,please help.following is the code which I am using,but it's not working properly</p>
  
  <pre><code>.chat{
      z-index:50;
      width: 300px;
      height:300px;
      margin-left:10px;
      float:right;
      border:1px solid blue;
  }
  </code></pre>
  
  <p>I am getting this ,it's adding scroll bar to page and not going to very right.</p>
  
  <p><img src="https://i.stack.imgur.com/vxZtg.png" alt="enter image description here"></p>