web-dev-qa-db-fra.com

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

En CSS, le overflow:hidden est 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 lui apparaîtra juxtaposé. C'est si le frère est float:left puis le conteneur avec float:none overflow:hidden apparaîtra à la droite du frère, pas de nouvelle ligne - comme si elle flottait dans le flux normal. Si le frère précédent est float:right alors le conteneur apparaîtra à gauche du frère. Le redimensionnement de ce conteneur l'affichera avec précision au centre entre les éléments flottants. Dites si vous avez deux frères et sœurs précédents, un float:left L'autre float:right, le conteneur apparaîtra centré entre les deux.

Alors voici le problème ...

Comment puis-je maintenir ce type de mise en page SANS masquer les enfants?

Googler sur le Web me donne des moyens sur clear:both et développez un conteneur ... mais je ne trouve aucune solution alternative au maintien du centrage gauche/droite des enfants antérieurs. Si vous faites le conteneur overflow:visible alors le conteneur ignore soudainement le flot de mise en page des éléments flottants et apparaît superposé de l'élément flottant.

Donc question:

Je dois avoir le conteneur overflow:hidden pour préserver la mise en page ...

comment puis-je le faire pour que les enfants ne soient pas masqués? J'ai besoin que l'enfant soit absolument placé par rapport au parent en dehors du conteneur.

OR

Comment puis-je overflow:visible afin que je puisse absolument positionner un enfant par rapport au parent en dehors du conteneur ... ENCORE, préserver le flux frère-like-layout-layout-flow?

cssoverflowcss-floatcenterhidden
79
marknadal

Vous pouvez utiliser le clearfix pour faire "la mise en page en préservant" de la même manière overflow: hidden Est-ce que.

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

ajouter class="clearfix" classe au parent, et supprime overflow: hidden;

77
Frexuz

Aucune des réponses affichées n'a fonctionné pour moi. Réglage position: absolute pour l’élément enfant a toutefois fonctionné.

11
reflexiv

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 la division parent n'a pas besoin d'être position: relative, définissez simplement les styles des enfants sur visibilité: visible.

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

Voici un exemple merdique qui vient d’être publié dans un fichier html à 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>
9
Thomas Davis

Pour les autres, si clearfix ne résout pas le problème à votre place, ajoutez des marges à la fratrie non flottante qui correspond à la même largeur que la largeur de la fratrie flottante.

1
Walf