title: Fixed position relative to parent element
body: <p>I am relatively new to CSS. I have run into a problem where I am trying to fix an element next to its parent element. I am able to do so with the following code:</p>
  
  <p><strong>Parent element:</strong></p>
  
  <pre><code>#search_results{
  position:relative;
  }  
  </code></pre>
  
  <p><strong>Child element:</strong> </p>
  
  <pre><code>.total {
  position: fixed;
  top:10px;
  width:250px;
  left: 75%;
  /*overflow: hidden;*/
  margin-left: -125px;
  }
  </code></pre>
  
  <p>This works fine until the browser window is resized. When that occurs, the fixed element overlaps its parent element. You can see my problem here:
  <a href="http://clarkbynum.com/twittimentindex.html" rel="noreferrer">Twittiment</a></p>
  
  <p>I am trying to fix the child element to the top of the page and the right-hand side of the parent element. Any ideas?</p>