Chen Hui Jing notes that when you absolutely position a flex item, it’s no longer part of the flex layout. Except… it kinda is a little bit. If you make the child position: absolute; but don’t apply any top/right/bottom/left properties, then flexbox alignment will still apply to it.
It’s odd to see, but it makes a certain sort of sense as well. When you apply position: absolute; to things (and nothing else), they kinda just stay where they are until you apply other positioning. Check out how this SVG icon just sits in the middle of this paragraph, and even flows with it on resize, because it doesn’t have any specific positioning instructions other than to not affect anything else.
Hi there!
Question: Can I rely on this behaviour across browsers?
Parent: (display flex; justify-content:center; align-items: center).
Children: (position: absolute; z-index:various;). Nicely centred but I can animate them independently without breaking the flow of the page.
Thanks,
Sonya
Hmm…what if the child has dynamic content/height? If I remove the fixed height:300px in the CodePen for example, the parent doesn’t budge and is collapsed at 0. Haven’t been able to find a CSS solution yet to get the parent to flex around the child.
hi friends. i have a question. i have an div that has a absolute position and flex display and max width 700 px ok? now i want this div be center of page and be responsive. what can i do?
I found it works accurately if you set everything to 0.
(top:0,right:0,bottom:0,left:0)