What does 100% really do? (multiple-case study)

Problem

I'm currently building a fully responsive website, and the more I try to understand, the more I don't. Principally with percentages.

I know a % is based on the first positioned parent. But, I have made some example on JSFiddle, and I had different results:

Fiddle

In all examples we have the same base:

HTML:

<div class="example">  
  <div class="container">  
    <div class="item"></div>
  </div>   
</div>

CSS Properties of divs :

  1. The .example block has position: relative. It has a width: 60% (of his parent: body).
  2. The .container block has position: static. It has a width: 80% (this time of .example because it's a relative block).

My Problem:

When I want to move the .item block instead of .example size, but for each CSS attribute I'm using (margin-left, left, transform, etc.), 100% results in a different size. Furthermore, if I change the positioning for .item (static, relative, etc.) the size is different again.

Can someone explain why 100% on .item are different for margin, left, or transform ?

Problem courtesy of: Arthur

Solution

Just to clarify for you take in care that % percentage is not the same computed value for all properties:

With your example the default position is this:

enter image description here

  • In position using left

    Percentages of the width of the containing block
    

    In this case since you are using absolute position the referent parent is the closest with a non static position defined. "example" container who is defined relative.

    enter image description here

  • In margin

    Percentages refer to the width of the containing block
    

    In case one without absolute position is fine moving the element to the left exact the size of the container div from his initial position.

    enter image description here

    When you add absolute now is the 100% of example after the space of his initial position.

    enter image description here

  • In transform

    Percentages refer to the size of bounding box
    

    So the element is offset by an amount equal to his width.

    enter image description here

Solution courtesy of: DaniP

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.