webentwicklung-frage-antwort-db.com.de

Wie kann man ein div innerhalb einer Flexbox absolut positionieren, ohne die Position seiner Geschwister zu beeinflussen?

Ich habe einen #text in einem flex #container und möchte etwas absolut darunter positionieren:

Wie könnte es bei der Berechnung der Flex-Positionierung von Geschwistern nicht berücksichtigt werden? 

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

Wie Sie feststellen werden, befindet sich der #text leicht oben in der Mitte des übergeordneten Elements, und ich möchte, dass es möglichst vertikal zentriert ist, wenn möglich, ohne es zu ändern:

  • Der Knotenbaum

  • Die bereits geschriebenen flex-Eigenschaften (als justify-content bei mehreren .text-Elementen)

Bearbeiten:

Ich habe eine andere Frage zu diesem Thema gefunden, die Lösung ohne Ergebnisse ausprobiert: Absolut positioniertes Element in einem Flex-Container wird immer noch als Element in IE und Firefox betrachtet.

Es scheint relativ zu Firefox und IE Fehler Zu sein (ich arbeite derzeit mit Firefox 47, es funktioniert auf Chromium.)

Endgültige Bearbeitung:

Ich forschte weiter und fand viele Fragen verwandt (Duplikat):

Und einen direkten Link zu Bugzilla .

7
PaulCo

Wie Sie herausgefunden haben, berücksichtigt ein absolut positioniertes flexibles Element in einigen Browsern justify-content-Berechnungen, obwohl es aus dem normalen Fluss entfernt werden sollte.

Wie in der Spezifikation definiert:

4.1. Absolut positionierter Flex Kinder

Da es aus dem Fluss ist, ist ein absolut positioniertes Kind eines Flex Container nimmt nicht am Flex-Layout teil.

In Firefox und IE11 fungieren absolut positionierte Flex-Elemente jedoch wie normale Geschwister in Bezug auf justify-content.

Hier ist ein Beispiel. Es funktioniert in den aktuellen Versionen von Chrome, Safari und Edge, schlägt jedoch in Firefox und IE11 fehl.

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


Obwohl Sie sich der in anderen Antworten beschriebenen Problemumgehungen bewusst sind, werde ich einen alternativen Ansatz vorschlagen, falls Sie in einem XY-Problem stehen.

Ich verstehe, dass Sie ein Flex-Element von unten ausrichten möchten, ein anderes Element jedoch vertikal im Container zentriert sein soll. Nun, Sie brauchen dafür nicht unbedingt eine absolute Positionierung. 

Sie können ein unsichtbares Pseudoelement verwenden, das als dritter Flex-Artikel fungiert. Dieses Element dient als Gegengewicht zum unten angeordneten DOM-Element und hält das mittlere Element zentriert.

Hier sind die Details:

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>

Ändern Sie den Wert von justify-content in center. Ich hoffe es funktioniert jetzt.

2
devhermluna