html - CSS ポジショニングが機能しない

Question

ときどき、CSS ポジショニング プロパティが期待どおりに機能しないことに気付きました。以下は私のコードです、

.position
{
position:absolute;
left:50%;
}

上記のコードは、クラスの要素を画面の 50% に配置する必要がありますが、そうはなっていません。必要な場所に配置するには、'left:220%' と書かなければなりません。

前もって感謝します。

Answer 1

position: relativeandを持つ要素はposition: absolute、画面 (というか、現在のドキュメント) に対してではなく、orが設定されている次の親要素に対して相対的です。position: relativeposition: absolute

これは、問題を示すJSFiddleです。

純粋な CSS では、その牢獄から「抜け出す」方法はありません。要素をドキュメントに対して相対的に配置するには、ドキュメントの直接の子にする必要があります。