title: What does 100% really do? (multiple-case study)
body: <p>I'm currently building a fully responsive website, and the more I try to understand, the more I don't. Principally with percentages. </p>
  
  <p>I know a % is based on the first positioned parent. But, I have made some example on JSFiddle, and I had different results:</p>
  
  <h2><a href="http://jsfiddle.net/bfyd2j0p/1/" rel="nofollow">Fiddle</a></h2>
  
  <p>In all examples we have the same base:</p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;div class="example"&gt;  
    &lt;div class="container"&gt;  
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS Properties of <code>div</code>s :</h3>
  
  <ol>
  <li>The <code>.example</code> block has <code>position: relative</code>. It has a <code>width: 60%</code> (of his parent: body).</li>
  <li>The <code>.container</code> block has <code>position: static</code>. It has a width: 80% (this time of <code>.example</code> because it's a relative block).</li>
  </ol>
  
  <h3>My Problem:</h3>
  
  <p>When I want to move the <code>.item</code> block instead of <code>.example</code> size, but for each CSS attribute I'm using (<code>margin-left</code>, <code>left</code>, <code>transform</code>, etc.), 100% results in a different size. Furthermore, if I change the positioning for <code>.item</code> (<code>static</code>, <code>relative</code>, etc.) the size is different again.</p>
  
  <p>Can someone explain why 100% on <code>.item</code> are different for <code>margin</code>, <code>left</code>, or <code>transform</code> ?</p>