Tornar a criança visível fora de um overflow: pai oculto

97

No CSS, o overflow:hiddené definido em contêineres pai para permitir que ele se expanda com a altura de seus filhos flutuantes.

Mas também tem outro recurso interessante quando combinado com margin: auto...

Se o irmão ANTERIOR for um elemento flutuante, ele aparecerá justaposto a ele. Ou seja, se o irmão for float:left, o contêiner com float:none overflow:hiddenaparecerá à direita do irmão, sem nova linha - como se estivesse flutuando no fluxo normal. Se o irmão anterior for float:right, o contêiner aparecerá à esquerda do irmão. O redimensionamento deste contêiner irá mostrá-lo com precisão centralizado entre os elementos flutuantes. Digamos que se você tiver dois irmãos anteriores, um float:leftao outro float:right, o contêiner aparecerá centralizado entre os dois.

Então aqui está o problema ...

Como faço para manter esse tipo de layout SEM mascarar os filhos?

Pesquisar em toda a web me dá maneiras de como clear:bothexpandir um contêiner ... mas não consigo encontrar nenhuma solução alternativa para manter a centralização esquerda / direita anterior. Se você criar o contêiner, overflow:visibleele de repente ignora o fluxo de layout dos elementos flutuantes e aparece em camadas sobre o elemento flutuante.

Então, pergunte :

Tenho que ter o container overflow:hiddenpara preservar o layout ...

como posso fazer com que as crianças não fiquem mascaradas? Preciso que o filho seja absolutamente posicionado em relação ao pai fora do contêiner.

OU

Como faço overflow:visiblepara que possa posicionar absolutamente um filho em relação ao pai fora do contêiner ... AINDA, preservo o fluxo de layout semelhante ao do float irmão?

css overflow css-float center hidden Marknadal
fonte

Respostas:

86

Você pode usar a clearfixfunção de "preservação de layout" da mesma maneira overflow: hidden.

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

adicione class="clearfix"classe ao pai e removaoverflow: hidden;

Frexuz
fonte
Hmm! Inteligente, estou apenas experimentando agora. O que estou percebendo no momento é que o conteúdo gerado se comporta corretamente, sendo preservado no fluxo do layout, no entanto, o pai ainda irá ignorá-lo e colocar em camadas os elementos flutuantes. No entanto, é uma ideia muito boa e vou brincar mais com ela para ver se consigo fazer com que se comporte corretamente e voltar para votar. Obrigado :).
marknadal de
@ user1671639 seu exemplo realmente não se aplica a um clearfix. Você precisa de algo mais, então sugiro que poste uma pergunta com seu problema.
Frexuz
Isso não funciona da mesma maneira overflow:hidden. Aplicar um clearfix ao div pai não permite que todos os componentes filhos fiquem "contidos" na mesma altura do pai.
Khom Nazid
11

Nenhuma das respostas postadas funcionou para mim. A configuração position: absolutepara o elemento filho funcionou, no entanto.

reflexiv
fonte
14
Mas o DIV pai não o mascararia se fosse além dos limites do DIV pai (que tem estouro: oculto)?
marknadal de
8
Afaik não tem, contanto que o pai não tenha posição: parente. Em seguida, o filho é posicionado em relação ao primeiro elemento ancestral posicionado (não estático), retirando-o do fluxo dom regular (dos pais).
Pim Schaaf
Se o pai tiver posição: relativa e não exigir, você pode torná-la posição: não definida.
sim
Verdade, se estiver position: fixedou absolutamente posicionado em relação a algo fora do pai que o possui visibility: hidden, será visível. No entanto, você geralmente precisa (deseja) posicioná-lo em relação ao pai para ser mais robusto às mudanças de código. Então, essas soluções não são uma alternativa.
ArneHugo
10

Esta é uma questão antiga, mas eu mesma a encontrei.

Tenho semi-soluções que funcionam situacionais para a pergunta anterior ("Crianças visíveis no estouro: pai oculto")

Se o div pai não precisa ser position: relative, basta definir os estilos filhos para visibilidade: visible.

Se o div pai precisa ser position: relative, a única maneira possível que encontrei de mostrar os filhos é position: fixed. Felizmente, isso funcionou para mim na minha situação, mas imagino que não funcionaria nos outros.

Aqui está um exemplo de baixa qualidade, basta postar em um arquivo html para ver. 

<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
fonte
Aqui está um exemplo de baixa qualidade, basta postar em um arquivo html para ver. <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; largura: 200px; overflow: visível; posição: absoluta; visibilidade: visível; claro: ambos; altura: 1000px; topo: 100px; esquerda: 10px; "> a </div> </div> </div> </code>
Thomas Davis
4
Obrigado por tentar responder, mas isso não funciona porque a posição fixa posiciona automaticamente o elemento em relação à janela de visualização, o que significa que ele não se move com o pai. Na verdade, se você tiver uma página de rolagem, ela permanecerá em 10px, 10px conforme você rola.
marknadal de
"Se o div pai precisa ser position: relative, a única maneira possível que encontrei para mostrar os filhos é position: fixed." Obrigado por isso. Tive um balão de ajuda popover que precisava transbordar, embora o pai tenha transbordado: scroll. Acabei tendo uma div absoluta, com uma área interna relativa e, em seguida, uma área de conteúdo fixa.
JackMorrissey
Obrigado, isso funcionou para mim. Eu tive um pai com posição relativa, e isso foi necessário porque sua posição foi definida usando left. Usar, em margin-leftvez disso, teria o mesmo efeito, então não precisei mais usar a posição relativa.
Felipe Castro
1

Para outros, se o clearfix não resolver isso para você, adicione margens ao irmão não flutuante que é / são iguais à (s) largura (s) do (s) irmão (s) flutuante (s).

Walf
fonte