title: fixed position div inside div container
body: <p>I am trying to create fixed position div inside relative container. I am using bootstrap css framework. I am trying to create a fixed position cart. So whenever user scroll page it will show cart contents. but now problem is, it ran outside that container div.</p>
  
  <p>This has to work in responsive mode.</p>
  
  <p>Here my try:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="container"&gt;
          &lt;div class="element"&gt;
              fixed
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>.wrapper {
      width:100%
  }
  .container {
      width:300px;
      margin:0 auto;
      height:500px;
      background:#ccc;
  }
  .element {
      background:#f2f2f2;
      position:fixed;
      width:50px;
      height:70px;
      top:50px;
      right:0px;
      border:1px solid #d6d6d6;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/tg2E4/" rel="noreferrer">See live example here</a>.</p>