web-dev-qa-db-fra.com

Comment positionner absolument une div dans une flex box sans influencer la position de ses frères et sœurs?

J'ai un #text à l'intérieur d'un flex #container et je veux absolument positionner quelque chose dessous:

Comment ne pourrait-on pas en tenir compte dans le calcul du positionnement flexible de ses 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 le remarquerez, le #text est légèrement en haut du centre du parent et je le voudrais parfaitement centré verticalement si possible sans modification:

  • L'arbre de noeud

  • Les propriétés flex déjà écrites (sous la forme justify-content en cas d'éléments multiples .text)

Modifier :

J'ai trouvé une autre question à ce sujet, j'ai essayé la solution sans résultat: Un élément positionné de manière absolue dans un conteneur flexible est toujours considéré comme un élément dans IE & Firefox

Il semble être relatif à un bug de Firefox et IE (J'utilise actuellement Firefox 47, cela fonctionne sur Chromium.)

Final Edit:

J'ai poussé mes recherches sur le sujet et trouvé beaucoup de questions liées (duplicata):

Et un lien direct vers Bugzilla .

htmlcsscss3flexboxcss-position
7
PaulCo

Comme vous avez pu le constater, un élément de type flex parfaitement positionné dans les calculs de justify-content dans certains navigateurs, même s'il devrait être supprimé du flux normal.

Comme défini dans la spécification:

4.1. Absolutely-Positioned Flex Enfants

Comme il est hors du flux, un enfant d'un flex absolu conteneur ne participe pas à la mise en page flex.

Cependant, dans Firefox et IE11, les éléments flexibles en position absolue agissent comme des frères et sœurs normaux en termes d'alignement sur justify-content.

Voici un exemple. Cela 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>

jsFiddle version

Bien que vous connaissiez les solutions de contournement indiquées dans d'autres réponses, je suggérerai une autre approche au cas où vous seriez pris dans un problème XY .

Si j'ai bien compris, vous souhaitez aligner un élément avec un élément de fond, mais en placer un autre 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 élément servira de contrepoids à l'élément DOM aligné en bas et maintiendra l'élément du milieu au centre.

Voici les détails:

6
Michael_B

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

Modifiez la valeur de justifier-contenu en centrant. J'espère que cela fonctionne maintenant.

2
devhermluna