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?

— Marknadal
fonte

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