CSSで変換されたパーセント値が要素自体に関連しているのはなぜですか？

Question

CSS変換でのパーセント値は、翻訳された要素自体のサイズに相対的で、（AFAIK）は親のサイズに関連する他のプロパティに適用されることはよく知られています。これは、たとえば、flexboxまたはgridのように、要素を垂直方向に中心に置くために主に使用されています。それは250ピクセルと100ピクセルですので、我々は、leftとtopプロパティに適用される50％が（topため、または高さ）.wrapperの幅の50％を意味する方法を見て、この例では

.wrapper { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: lightgray; 
 
} 
 

 
#element { 
 
    width: 42px; 
 
    height: 42px; 
 
    background-color: red; 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

<div class="wrapper"> 
 
    <div id="element"></div> 
 
</div>

、それぞれ、しかしtranslateの場合は#elementに-50％が適用されるため、42％の50％です。

私はそれの利点を見ていますが、私はこの（明らかな）不整合の理由を理解していません。したがって、

1. CSS変換のパーセント値は、他のプロパティでは親のサイズに比例しているのに対し、エレメントの相対的な値はなぜですか？
2. 他のプロパティはありますか？

EDIT： SergeS」の回答で述べたように、私はすべてのプロパティが定義によってを持っていることを<percentage>値のために独自の参照をMDNに参照してください。 transformで

、

パーセント - バウンディングボックスのサイズを参照してください。

topにおいて

、

パーセンテージ - 含有ブロックの高さを指します。

marginにおいて

、

パーセンテージ - 含有ブロックの幅を指します。

私はこれらの定義の理由が不思議です。

Answer 1

1. • 現在の要素を取得し、定義によって翻訳=翻訳。そして、現在の要素を考慮に入れます。
   • 左上、...、その他 - 位置プロパティ - 要素が親要素にどのように配置されているかを定義します。したがって、親要素を親要素絶対に最も近い相対/絶対/固定要素）
   • パディング、マージン、... - とボックスモデル特性をothet - そう再びそれらが

2. 両方の場合において、NO

Answer 2

、値が関連している親コンテナに関連している - それらは要素が親要素の内部寸法決めされている方法を定義要素自体に

最初のケースでは、left:50%とtop:50%と言うときは、相対的に最初に配置された親（デフォルトボディ）からのオフセットを測定することによって、要素を上端から50％オフセットしたままにしておくことを意味します。

2番目のケースでは、translateと言うとき、指定された値でtranslateメソッドによって要素を変換していることを意味します。