Aide à la programmation, réponses aux questions / Html / Comment positionner absolument une div dans une boîte souple sans influencer la position de ses frères et sœurs? [duplicate] - html, css, css3, flexbox, css-position

Comment positionner absolument une div dans une boîte souple sans influencer la position de ses frères et sœurs? [duplicate] - html, css, css3, flexbox, css-position

J'ai un #text à l'intérieur d'un flex #container et veulent absolument placer quelque chose en dessous:

Comment pourrait-il ne pas être pris en compte dans le calcul du positionnement flexible des frères et sœurs?

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

Comme vous remarquerez la #text est légèrement à la tête du centre est parent et j'aimerais parfaitement centré verticalement si possible sans modification:

L'arbre de noeud
Les propriétés flex déjà écrites (comme justify-content en cas de multiples .text éléments)

Modifier :

J'ai "trouvé une autre question à ce sujet, essayé la solution sans résultats: L'élément positionné dans un conteneur Flex est toujours considéré comme un élément dans IE et Firefox

Il semble être relatif à un bug de Firefox et IE (J'utilise actuellement Firefox 47, ça marche sur Chrome.)

Final Edit:

J'ai poussé mes recherches sur le sujet et j'ai trouvé beaucoup de questions en relation (dupliquer) :

Et un lien direct vers Bugzilla.

Réponses:

4 pour la réponse № 1

Comme vous l'avez découvert, un élément flexible parfaitement positionné intervient dans justify-content calculs dans certains navigateurs malgré le fait qu'il devrait être retiré du flux normal.

Comme défini dans la spécification:

4.1. Flex absolu Les enfants

Comme il est hors de flux, un enfant parfaitement positionné d'un flex conteneur ne participe pas à la mise en page flex.

Dans Firefox et IE11, cependant, les éléments flexibles parfaitement positionnés agissent comme des frères et sœurs normaux en termes d'alignement avec justify-content.

Voici un exemple: il fonctionne dans Chrome, Safari et Edge actuels, mais échoue dans Firefox et 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>

Version jsFiddle

Bien que vous soyez conscient des solutions de contournement affichées dans d’autres réponses, je vous suggérerai une autre approche si Problème XY.

Je crois savoir que vous souhaitez aligner en bas un élément flexible, mais que vous avez un autre élément centré verticalement dans le conteneur. Eh bien, vous n'avez pas nécessairement besoin d'un positionnement absolu pour cela.

Vous pouvez utiliser un pseudo-élément invisible qui agit comme un troisième élément flexible. Cet objet servira de contrepoids à l’élément DOM aligné en bas et gardera l’élément central centré.

Voici les détails:

Centrer et aligner les éléments flexibles
Méthodes d'alignement des éléments flexibles (voir les encadrés 62 et 66)

2 pour la réponse № 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>

Changez la valeur du contenu justifié pour la centrer. J'espère que ça marche maintenant.