[Résolu] Overlap entre un float et un div frère positionné

Bonjour,

Je m'appelle Thierry et je suis nouveau sur ce forum, même si je cousulte le site depuis quelques années. Je suis à la recherche d'un endroit dans la doc CSS qui documente ce point. Je vous joints un code réduit au minimum: https://jsfiddle.net/tchappui/o12kwbgu/

Lorsque la div #e2 est positionnée, elle recouvre le float, tandis que lorsque elle ne l'est pas (je retire le postion: relative sur #e2), le comportement est celui que j'attends, à savoir que le float est au-dessus de #e2 et le texte présent dans cette div se développe autour du float.

C'est une situation qui revient potentiellement souvent p.ex. avec Bootstrap également. Mais je n'arrive pas à trouver la doc CSS qui documente ce comportement. Si quelqu'un a une idée, je suis preneur.

En attendant, je vous souhaite une très belle fin de semaine et vous envoie mes meilleures salutations

Thierry
Modifié par tchappui (19 Oct 2016 - 20:27)

Merci beaucoup pour cette réponse. En fait, la parade, je la connais. Ce que je ne comprend pas, c'est pourquoi la position relative entraîne ce changement de comportement. C'est certainement un cas d'école qui doit être documenté quelque part, mais je ne trouve pas.

Encore merci et meilleures salutations

Thierry

Bonjour.

En utilisant 'position', vous avez modifié l'ordre d'empilement.

Voici un document qui en parle :
http://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement


Modifié par Zelena (20 Oct 2016 - 09:42)

Bonjour et bienvenue,

si le bloc positionné de droite recouvre celui flottant de gauche, c'est en effet parce que les règles d'empilement sont ainsi faites (positionné > flottant > celui qui précède).
Cf. également les pages de MDN : Comprendre z-index en CSS

Si overflow: hidden est une solution alternative, cela n'a rien à voir et c'est beaucoup plus complexe bien que fondamental en CSS : il est question de BFC (Block Formatting Context), cf. http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html

Les 2 concepts en exemple dans https://jsfiddle.net/vpb7f33d/3/

Mille merci pour tous ces liens. C'est exacement ce que je cherchais sans avoir les mots clés pour l'expliquer au moteur de recherche.

Merci encore et belle fin de semaine

Thierry