/ / Wie positioniere ich absolut ein div in einer Flexbox, ohne die Position seiner Geschwister zu beeinflussen? [duplizieren] - html, css, css3, flexbox, css-position

Wie positioniert man absolut ein div innerhalb einer Flex Box ohne die Position seiner Geschwister zu beeinflussen? [duplizieren] - html, css, css3, flexbox, css-position

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

Wie könnte es in der Berechnung für die flexible 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 bemerken werden #text ist etwas oberhalb der Mitte von Eltern und ich würde es mögen perfekt vertikal zentriert wenn möglich ohne Änderung:

  • Der Knotenbaum

  • Die bereits geschriebenen Flex-Eigenschaften (wie justify-content im Falle von Vielfachen .text Elemente)

Bearbeiten:

Ich habe eine andere Frage zu diesem Thema gefunden, die Lösung ohne Ergebnisse versucht: Ein absolut positioniertes Objekt in einem flexiblen Container wird in IE & Firefox immer noch als Element betrachtet

Es scheint relativ ein Firefox und IE Bug zu sein (Ich betreibe derzeit Firefox 47, es funktioniert auf Chromium.)

Letzte Änderung:

Ich habe meine Forschung zu diesem Thema vorangetrieben und viele Fragen gefunden verbunden (duplizieren):

Und eine direkte Verbindung zu Bugzilla.

Antworten:

4 für die Antwort № 1

Wie du herausgefunden hast, ist ein absolut positionierter Flex-Gegenstand wichtig justify-content Berechnungen in einigen Browsern trotz der Tatsache, dass 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, ein absolut positioniertes Kind eines Flex Container nimmt nicht am Flex-Layout teil.

In Firefox und IE11 agieren jedoch absolut positionierte Flex-Elemente wie normale Geschwister in Bezug auf die Ausrichtung mit justify-content.

Hier ist ein Beispiel. Es funktioniert in aktuellen Chrome, Safari und Edge, scheitert aber in Firefox und 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


Obwohl Sie sich der Problemumgehungen in anderen Antworten bewusst sind, schlage ich Ihnen einen alternativen Ansatz vor, falls Sie sich in einem XY-Problem.

Mein Verständnis ist, dass Sie ein Flex-Element unten ausrichten möchten, aber ein anderes Element vertikal im Container zentriert haben. Nun, du brauchst dafür keine absolute Positionierung.

Sie können ein unsichtbares Pseudo-Element verwenden, das als drittes Flex-Element fungiert. Dieser Gegenstand dient als Gegengewicht zum unten ausgerichteten DOM-Element und hält das mittlere Objekt zentriert.

Hier sind die Details:


2 für die Antwort № 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>

Ändern Sie den Wert von justify-content in center. Hoffe es klappt jetzt.