Étendre l'enfant div au-delà de conteneur div

Question

J'essaye d'élargir cette div à la largeur du navigateur. J'ai lu dans ici Que vous pouvez utiliser {position:absolute; left: 0; right:0;} pour y parvenir comme dans le jsfiddle ici: http://jsfiddle.net/bJbgJ/3/

Mais le problème est que mon #container actuel a une propriété {position:relative;}, et donc si j'applique {position:absolute} à la div de l'enfant, il ne ferait que se référer à #container. Existe-t-il un moyen de prolonger la plongée de mon enfant au-delà du #container?

Brett · Answer

Je peux penser à cinq façons d'atteindre potentiellement votre objectif:

Utilisez des marges négatives sur l'élément interne pour le déplacer en dehors du parent
Utilisez Javascript pour déplacer l'élément interne en dehors du parent.
Modifiez le code source et déplacez l'élément interne en dehors du parent.
Utilisez position: fixed sur l'élément interne. Cela permettra à l’élément intérieur de s’échapper, mais a l’inconvénient que l’élément sera fixé à la position donnée (jamais en mouvement).
Supprimez le position: relative; de l'élément parent ou donnez à l'élément parent un position: static

Jules · Answer

Vous pouvez essayer d'ajouter overflow:visible au parent div, en rendant l'enfant plus large que le parent.

Brad Butler · Answer

Parent à position:static, enfant à position:absolute Ou

Parent to position:relative, enfant to position:fixed (avec l'inconvénient fixe, ne bouge jamais)

Votre left: 0; right:0; fonctionne avec ces deux solutions. Notez simplement que votre div enfant dessine au-dessus de tous les divs situés en dessous, dans le code, quelle que soit la propriété de la variable display de la div. Vous devrez soit ajouter une valeur padding-top à la prochaine division pour compenser ( exemple simple dans jsfiddle ), ou une autre division sous-jacente ayant le même comportement en hauteur que l’enfant ( exemple beaucoup plus élaboré dans codepen ), ce qui n’est probablement pas idéal, mais fonctionne en html/css simple.