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:
In all examples we have the same base:
<div class="example"> <div class="container"> <div class="item"></div> </div> </div>
CSS Properties of
position: relative. It has a
width: 60%(of his parent: body).
position: static. It has a width: 80% (this time of
.examplebecause it's a relative block).
When I want to move the
.item block instead of
.example size, but for each CSS attribute I'm using (
transform, etc.), 100% results in a different size. Furthermore, if I change the positioning for
relative, etc.) the size is different again.
Can someone explain why 100% on
.item are different for
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
Percentages of the width of the containing block
In this case since you are using
absoluteposition the referent parent is the closest with a non static position defined. "example" container who is defined relative.
Percentages refer to the width of the containing block
In case one without
absoluteposition is fine moving the element to the left exact the size of the
containerdiv from his initial position.
When you add
absolutenow is the 100% of
exampleafter the space of his initial position.
Percentages refer to the size of bounding box
So the element is offset by an amount equal to his width.
There is currently no discussion for this recipe.
This recipe can be found in it's original form on Stack Over Flow.