本部ブロック幅が

Question

この例を見てみてください絶対位置と、ネストされたdivタグでブロック全体を取っていないhttp://jsfiddle.net/xcYum/1/

私は（クラス=進行で）divタグである理由コンテンツはに分割されるかを知りたい

1. 1行ではなく2行（つまり、あなたの進捗とあなたの\ n進歩）。私は 'div class = progress'の幅を指定する必要はありません。あなたは私にすべてのCSSやHTML要素タイプ（または何らかの理由でボクシング）がある説明を私に教えてもらえますか？ルールが実際にどのように機能しているかを正確に知りたいのですが、それがうまくいっているかどうかを記憶するのではなく、うまく機能しません。

2. 私は、コンテナのCSSを次のように変更すると思われます。 。コンテナ{ 位置：相対; } divタグ（class = progressを持つ）が1行で表示されるようになりました。それともネストされているのでしょうか？

3. 絶対配置されたdivタグをネストしないようにするにはどうすればよいですか？そのような構造を持つことは間違っているか悪い習慣ですか？私は '100％'と 'あなたの進歩'を 'div class = container'タグに基づいて配置したいので、私はこの例でそれを使用しています。言い換えれば、私はちょうど2つのものを動かすために（ 'div class = container'タグ）1つのもの（100％と 'あなたの進歩'）を動かすことができます。私の思考プロセスに何が間違っていますか？

Answer 1

1. 絶対配置要素は、ラップを縮小するので、換言すれば、それは可能な限り小さくなります。あなたはwhite-space: nowrap

2. ない要素の子供たちは、親

Answer 2

1. に移動するためにあなたは絶対位置を必要としない

2. これがなぜ起こるかわから使用してラップしないようにテキストを強制することができますAbsolute要素は、通常のフローの子と、positionプロパティがabsoluteに設定された子孫のための新しい包含ブロックを確立します。

   リファレンス：http://reference.sitepoint.com/css/absolutepositioning

3. 最初の答えと同じ

4. 絶対要素は、その含有ブロックに対して位置決めされます。したがって、相対位置を持つためには親のdivクラス= containerが必要です。絶対位置のすべての要素はそれと共に移動します。

   参考：http://reference.sitepoint.com/css/absolutepositioning