title: Prevent fixed element from overlapping scrollbars
body: <p>I have a site where I'm trying to add a "contact us" tab in the lower right corner. <a href="https://jsfiddle.net/Rothrock42/mx1vxed2/" rel="nofollow">Here is a fiddle</a> of my mock up. The pink contact tab is over the scrollbar. I would like it to be just to the left side of the scrollbar.</p>
  
  <p>I'm using <code>position:fixed</code> to put the tab in the lower right, but it overlaps the scroll bar. I could change the <code>right:0</code> to something else, but my understanding is that the width of scrollbars varies in different browsers, so I don't know which value to choose.</p>
  
  <p>I've googled and found so many confusing and convoluted answers, yet none seem to actually address what I'm trying to solve.</p>
  
  <p>How can I position an element to be fixed and not overlap the scrollbar.</p>