絶対配置要素 - 正常なパーセンテージが機能しない

Question

絶対配置要素が「トップ」位置のパーセンテージを無視する原因は何ですか？パーセンテージは "left"のために働いています。ピクセルとvhを使用すると垂直方向に配置することができます。ちょうどパーセンテージではありません。

Answer 1

これは、絶対要素の親を "position：relative"にする必要があるためです。したがって、絶対要素の上部および左のフィールドは、親に対して相対値を取得します。

Answer 2

レイアウトをその親要素に定義する必要があります。

レイアウトは、これはブラウザが割合の計算がその親にrealtionで行われる必要があることを理解するのに役立ち及びませんが、「固定」などの「静的」「絶対」、「」に対して

以外の可能性ウィンドウサイズ。

Answer 3

明らかに、要素を絶対的に配置する方法は複数あります。ここでは、親DIVを使用せずに一つの方法は次のとおりです。

CSS：

html,body { 
    width:100%; 
    height:100%; 
    background:red; 
    } 
    .centered-axis-xy { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%); 

} 
div.cyan5050 { 
    width:50%;height:50%; 
    background:cyan; 
} 
div p { 
    width:100%; 
    height:50%; 
    margin-top: 20vh; 
    text-align:center; 
} 

HTML：

<div class="cyan5050 centered-axis-xy"> 
     <p>Content to Display</p> 
</div> 

あなたは割合を使用する場合は、1つは、提供する必要があり、通常fiddle

を参照してください。 DIVタグのパーセンテージの基礎、すなわち、包含する外側DIVの高さおよび幅パーセンテージ、あるいはresp html要素とbody要素に影響します。しかし、この場合、CSSにはhereという応答的な配置技術が組み込まれているため、CSSトランスフォームにtranslate（）functionが装備されているため、html要素とbody要素の割合はオプションです。