/ / Como posicionar absolutamente uma div dentro de uma caixa flexível sem influenciar a posição de seus irmãos? [duplicado] - html, css, css3, flexbox, css-position

Como posicionar absolutamente uma div dentro de uma caixa flexível sem influenciar a posição de seus irmãos? [duplicado] - html, css, css3, flexbox, css-position

Eu tenho um #text dentro de um flex #container e quero absolutamente posicionar algo abaixo dele:

Como não poderia ser tomado no cálculo para o posicionamento flexível dos irmãos?

#container{
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
position: relative;
width: 95vw;
height: 95vh;
border: 1px solid black
}
#text{
font-size: 13px;
width: 50vw;
text-align: justify;
}
#absolute{
position: absolute;
bottom: 5px;
left: calc(47.5vw - 25px);
width: 50px;
text-align: center;
color: red;
}
<div id="container">
<div id="text">
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
</div>
<div id="absolute">
Absolutly
</div>
</div>

Como você vai notar o #text é um pouco de cabeça do centro de pai e eu gostaria que perfeitamente centrada verticalmente se possível sem modificar:

  • A árvore do nó

  • As propriedades flexíveis já escritas (Como justify-content no caso de múltiplos .text elementos)

Editar:

Eu encontrei uma outra questão sobre este assunto, tentei a solução sem resultados: Item posicionado absoluto em um contêiner flexível ainda é considerado item no IE e no Firefox

Parece ser um bug relativo ao Firefox e ao IE (Atualmente estou executando o Firefox 47, ele funciona no Chromium.)

Edição final:

Eu empurrei minha pesquisa sobre o assunto e encontrei muitas perguntas relacionado (duplicado) :

E um link direto para Bugzilla.

Respostas:

4 para resposta № 1

Como você descobriu, um item de flexão absolutamente posicionado justify-content cálculos em alguns navegadores, apesar do fato de que ele deve ser removido do fluxo normal.

Conforme definido nas especificações:

4.1. Flex Absolutamente Posicionado Crianças

Como está fora de fluxo, uma criança absolutamente posicionada de um flex O contêiner não participa do layout flexível.

No Firefox e no IE11, no entanto, itens flexíveis posicionados de forma absoluta funcionam como irmãos normais em termos de alinhamento com justify-content.

Aqui está um exemplo. Ele funciona no Chrome atual, Safari e Edge, mas falha no Firefox e no IE11.

flex-container {
display: flex;
justify-content: space-between;
position: relative;
background-color: skyblue;
height: 100px;
}
flex-item {
background: lightgreen;
width: 100px;
}
[abspos] {
position: absolute;
z-index: -1;
}
<flex-container>
<flex-item>item 1</flex-item>
<flex-item>item 2</flex-item>
<flex-item abspos>item 3</flex-item>
</flex-container>

jsFiddle version


Embora você esteja ciente das soluções postadas em outras respostas, sugiro uma abordagem alternativa caso você seja pego em uma Problema XY.

Meu entendimento é que você deseja alinhar no mínimo um item flexível, mas tem outro item verticalmente centralizado no contêiner. Bem, você não precisa necessariamente de posicionamento absoluto para isso.

Você pode usar um pseudoelemento invisível que atua como um terceiro item flexível. Este item servirá como um contrapeso para o elemento DOM alinhado na parte inferior e manterá o item do meio centralizado.

Aqui estão os detalhes:


2 para resposta № 2

#container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
width: 95vw;
height: 95vh;
border: 1px solid black
}
#text{
font-size: 13px;
width: 50vw;
text-align: justify;
}
#absolute{
position: absolute;
bottom: 5px;
left: calc(47.5vw - 25px);
width: 50px;
text-align: center;
color: red;
}
<div id="container">
<div id="text">
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
</div>
<div id="absolute">
Absolutly
</div>
</div>

Altere o valor de justificar o conteúdo para o centro. Espero que funcione agora.