コンテナーdivを超えて子divを拡張する

Question

このdivをブラウザーの幅に合わせて拡大しようとしています。私は here から読みましたが、ここでjsfiddleのように{position:absolute; left: 0; right:0;}を使用してそれを実現できます： http://jsfiddle.net/bJbgJ/3/

しかし、問題は、現在の#containerに{position:relative;}プロパティがあるため、{position:absolute}を子divに適用すると、#containerのみを参照することになります。子divを#containerを超えて拡張する方法はありますか？

Answer 1

目標を達成するための5つの方法を考えることができます。

1. 内部要素に負のマージンを使用して、親要素の外側に移動します

2. JavaScriptを使用して、内部要素を親の外に移動します。

3. ソースコードを変更し、内部要素を親の外に移動します。

4. 内部要素でposition: fixedを使用します。これにより、内側の要素を分割できますが、要素が指定された位置に固定される（決して移動しない）ことが欠点です。

5. position: relative;を親要素から削除するか、親要素にposition: staticを指定します

Answer 2

追加してみてくださいoverflow:visibleを親divに追加し、子を親よりも広くします。

Answer 3

親はposition:staticに、子はposition:absoluteに、または

親はposition:relativeに、子はposition:fixedに（固定で、下落しない）

left: 0; right:0;はこれらのソリューションの両方で機能します。子divは、divのdisplayプロパティが何に設定されていても、コードでその下のdivの上に描画されることに注意してください。補正するためにpadding-top値を次のdivに追加する必要があります（ jsfiddleの簡単な例 ）、またはその下にある子と同じ高さの動作を持つ別のdiv（ codepenのはるかに複雑な例 ）、これはおそらく理想的ではありませんが、単純なhtml/cssで動作します。