22

パーセンテージで垂直に配置された DIV を作成しようとしています。親コンテナーを相対に設定し、コンテンツ div を絶対に設定しています。これは、コンテンツ div をピクセルで配置するとうまくいきますが、パーセンテージを試すと、パーセンテージは無視されます。

.container {
position: relative;
}


.content {
position: absolute;
left: 10%;
top: 50%;
}


<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div.
</div></div>

コンテンツ div は、50% の垂直方向の配置を無視して、ページの上部に表示されます。私は何が欠けていますか？前もって感謝します！

4

4 に答える 4

28

絶対配置された要素は、ドキュメントの自然な流れから取り出されます。つまり、コンテナーの高さと幅がゼロになります。

そのゼロの高さと幅の 10% と 50% はもちろんゼロです。

コンテナーに高さと幅を指定すると、パーセンテージの位置が思いどおりに機能し始めます。

これが実際の例です。

.container { position: relative; width:500px; height:500px; }
于 2012-11-05T20:09:48.110 に答える
1

divに追加height: 100%する必要がある可能性があります。.container

.container { height: 100%; position: relative; }

そしておそらくすべての祖先の要素：

html, body { height: 100%; }
于 2012-11-05T20:10:13.840 に答える
1

@ハイメ・ディクソンの答えは素晴らしかった。美しい、そこに与えられた2つの素晴らしいコンセプト。

  1. パーセンテージ、相対単位は SOMETHING に対して相対的です。これらの値が計算される参照コンテナーが何であるかを理解する必要があります。

  2. コンテナがある場合でも、コンテナの寸法が「自動」の場合、任意の動作が発生する可能性があります。したがって、予測可能な動作を実現するには、単に「自動」と言うよりも優れたディメンションがコンテナーにあることを確認してください。または、コンテナーにも 100% とその親などがある場合は、要素 html、body の高さを指定した css 命令があることを確認してください。

例：

html, body {
    height: desired_value;
}
于 2015-06-24T15:41:03.113 に答える