Jak ustawić absolutnie div w flex boxie bez wpływania na pozycję jego rodzeństwa? [duplicate] - html, css, css3, flexbox, css-position

Mam #text wewnątrz flexu #container i chcesz całkowicie ustawić coś pod nim:

Jak można nie brać w obliczeniach elastycznego pozycjonowania rodzeństwa?

#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>

Jak zauważysz #text jest nieco na plus w centrum jest rodzicem i chciałbym go idealnie pionowo wyśrodkowany jeśli to możliwe bez modyfikacji:

• Drzewo węzłów

• Już napisane właściwości flex (tak jak justify-content w przypadku wielokrotności .text elementy)

Edytować :

Znalazłem kolejne pytanie w tej sprawie, wypróbowałem rozwiązanie bez wyników: Pozycja bezwzględnie umieszczona w pojemniku flex wciąż jest traktowana jako element w IE i Firefox

Wygląda to na względny błąd przeglądarki Firefox i IE (Aktualnie używam przeglądarki Firefox 47, działa ona na Chromium.)

Ostateczna edycja:

Popchnąłem moje badania na ten temat i znalazłem wiele pytań związane z (duplikować) :

• Bezwzględne pozycjonowanie zakłócające pozycjonowanie Flexboksa w Firefoksie

• Absolutnie ustawiony element elastyczny nie jest usuwany z normalnego przepływu w przeglądarce Firefox

• Flexbox w Firefox: Elementy nie są prawidłowo ustawione

• Odpowiedź autor: @Oriol Wyklucz element ze stałym pozycjonowaniem z treści-uzasadnienia w układzie flex

I bezpośredni link do Bugzilla.

Odpowiedzi:

Jak już odkryłeś, w tym miejscu znajdują się bezwzględnie umieszczone elementy flex justify-content obliczenia w niektórych przeglądarkach pomimo tego, że powinny zostać usunięte z normalnego przepływu.

Zgodnie z definicją w specyfikacji:

4.1. Absolutnie ustawiony Flex Dzieci

Ponieważ jest poza przepływem, absolutnie pozycjonowane dziecko z flex kontener nie uczestniczy w układzie flex.

W przeglądarkach Firefox i IE11 jednak pozycje pozycjonowane elastycznie działają jak normalne rodzeństwo pod względem zgodności justify-content.

Oto przykład: działa w obecnych przeglądarkach Chrome, Safari i Edge, ale kończy się niepowodzeniem w Firefoksie i 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>

Wersja jsFiddle

Chociaż jesteście świadomi obejścia zamieszczonego w innych odpowiedziach, zasugeruję alternatywne podejście na wypadek, gdybyście zostali złapani w Problem XY.

Rozumiem, że chcesz wyrównać do dołu jeden element elastyczny, ale inny element pionowo wyśrodkowany w kontenerze. Cóż, nie potrzebujesz do tego bezwzględnego pozycjonowania.

Możesz użyć niewidocznego pseudoelementu, który działa jak trzeci element flex. Ten element będzie służyć jako przeciwwaga dla elementu DOM wyrównanego do dołu i utrzymywać środek środkowy na środku.

Oto szczegóły:

• Wyśrodkuj i wyrównaj elementy elastyczne
• Metody wyrównywania elementów Flex (patrz pola 62 i 66)

#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>

Zmień wartość justify-content na center. Mam nadzieję, że teraz działa.