Rendre l'enfant visible en dehors d'un débordement: parent masqué

97

En CSS, le overflow:hiddenest défini sur les conteneurs parents afin de lui permettre de s'étendre avec la hauteur de leurs enfants flottants.

Mais il a aussi une autre caractéristique intéressante lorsqu'il est combiné avec margin: auto...

Si le frère PREVIOUS est un élément flottant, il apparaîtra en fait juxtaposé à celui-ci. Autrement dit, si le frère est float:leftalors le conteneur avec float:none overflow:hiddenapparaîtra à droite du frère, pas de nouvelle ligne - comme s'il flottait dans le flux normal. Si le frère précédent est float:rightalors le conteneur apparaîtra à gauche du frère. Le redimensionnement de ce conteneur l'affichera avec précision centré entre les éléments flottants. Disons que si vous avez deux frères et sœurs précédents, l'un float:leftl'autre float:right, le conteneur apparaîtra centré entre les deux.

Alors, voici le problème ...

Comment conserver ce type de mise en page SANS masquer les enfants?

Googler partout sur le Web me donne des moyens de clear:bothdévelopper et d'agrandir un conteneur ... mais je ne trouve pas de solution alternative pour maintenir le centrage gauche / droite de l'enfant précédent. Si vous créez le conteneur, overflow:visiblele conteneur ignore soudainement le flux de disposition des éléments flottants et apparaît en couches au-dessus de l'élément flottant.

Alors question :

Je dois avoir le conteneur overflow:hiddenpour conserver la mise en page ...

comment faire pour que les enfants ne soient pas masqués? J'ai besoin d'avoir l'enfant positionné de manière absolue par rapport au parent en dehors du conteneur.

OU

Comment est-ce overflow:visibleque je peux absolument positionner un enfant par rapport au parent en dehors du conteneur ... ENCORE conserver le frère float-like-layout-flow?

css overflow css-float center hidden marknadal
la source

Réponses:

86

Vous pouvez utiliser le clearfixpour faire la "mise en page préservant" de la même manière overflow: hidden.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

ajouter une class="clearfix"classe au parent et supprimeroverflow: hidden;

Frexuz
la source
Hmm! Intelligent, je suis en train d'expérimenter. Ce que j'obtiens actuellement, c'est que le contenu généré se comporte correctement, étant préservé dans le flux de la mise en page, mais le parent l'ignorera toujours et le placera au-dessus des éléments flottants. Cependant, c'est une très bonne idée et je vais jouer avec plus pour voir si je peux le faire se comporter correctement, et revenir voter. Je vous remercie :).
marknadal
@ user1671639 votre exemple ne s'applique pas vraiment à un clearfix. Vous avez besoin d'autre chose, alors je vous suggère de poster une question avec votre problème.
Frexuz
Cela ne fonctionne pas du tout de la même manière overflow:hidden. L'application d'un clearfix au div parent ne permet pas à tous les composants enfants d'être "contenus dans" la même hauteur que le parent.
Khom Nazid
11

Aucune des réponses affichées n'a fonctionné pour moi. La configuration position: absolutede l'élément enfant fonctionnait cependant.

réflexif
la source
14
Mais le DIV parent ne le masquerait-il pas s'il dépassait les limites du DIV parent (qui a overflow: hidden)?
marknadal
8
Afaik non, tant que le parent n'a pas de position: relative. Ensuite, l'enfant est positionné par rapport à son premier élément ancêtre positionné (non statique), le retirant du flux dom régulier (parent).
Pim Schaaf
Si le parent a position: relative et n'en a pas besoin, vous pouvez le faire position: unset.
yeahlad
Certes, s'il est position: fixedpositionné en absolu par rapport à quelque chose en dehors du parent qui l'a visibility: hidden, il sera visible. Cependant, vous devez souvent (voulez) le positionner par rapport au parent pour être plus robuste aux changements de code. Alors ces solutions ne sont pas une alternative.
ArneHugo le
10

C'est une vieille question mais je l'ai rencontrée moi-même.

J'ai des semi-solutions qui fonctionnent situationnellement pour la question précédente ("Enfants visibles en débordement: parent caché")

Si le div parent n'a pas besoin d'être position: relative, définissez simplement les styles enfants sur visibilité: visible.

Si le div parent doit être position: relative, le seul moyen que j'ai trouvé pour montrer aux enfants était position: fixed. Cela a fonctionné pour moi dans ma situation assez heureusement, mais j'imagine que cela ne fonctionnerait pas dans d'autres.

Voici un exemple merdique, il suffit de le publier dans un fichier html pour l'afficher. 

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>
Thomas Davis
la source
Voici un exemple merdique, il suffit de le publier dans un fichier html pour l'afficher. <code> <div style = "background: # ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;"> <div style = "background: # ff0000; position: fixed; top: 10px; left : 10px; "> asd <div style =" background: # 00ffff; width: 200px; overflow: visible; position: absolue; visibilité: visible; clear: both; height: 1000px; top: 100px; left: 10px; "> a </div> </div> </div> </code>
Thomas Davis
4
Merci d'avoir essayé de répondre, mais cela ne fonctionne pas car la position fixe positionne automatiquement l'élément par rapport à la fenêtre, ce qui signifie qu'il ne se déplace pas avec le parent. En fait, si vous avez une page défilante, elle restera à 10px, 10px lorsque vous faites défiler.
marknadal
"Si le div parent doit être position: relative, le seul moyen que j'ai trouvé pour montrer les enfants était position: fixed." Merci pour ça. J'avais une bulle d'aide popover qui devait déborder même si le parent avait un débordement: scroll. J'ai fini par avoir un div absolu, avec un intérieur relatif, puis une zone de contenu fixe.
JackMorrissey
Merci, cela a fonctionné pour moi. J'avais un parent avec une position relative, et c'était nécessaire parce que sa position était définie à l'aide de left. Utiliser à la margin-leftplace aurait le même effet, donc je n'avais plus besoin d'utiliser la position relative.
Felipe Castro
1

Pour d'autres, si clearfix ne résout pas cela pour vous, ajoutez des marges au frère non flottant qui est / sont les mêmes que la (les) largeur (s) du ou des frères flottants.

Walf
la source