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
?
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
Vous pouvez essayer d'ajouter overflow:visible
au parent div
, en rendant l'enfant plus large que le parent.
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.