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

问题

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 `div`s :

The .example block has position: relative. It has a width: 60% (of his parent: body).
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 ?

回答1:

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:

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.
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.

When you add absolute now is the 100% of example after the space of his initial position.
In transform
```
Percentages refer to the size of bounding box
```
So the element is offset by an amount equal to his width.