Flexbox and Absolute Positioning: A Surprising Interaction
Chen Hui Jing has highlighted an intriguing quirk in CSS: when you make a flex item position: absolute; without adding top, right, bottom, or left values, the element is technically removed from the flex layout — but flexbox alignment still applies to it.
This behavior becomes clearer when you consider how absolute positioning works in general. An element given only position: absolute; tends to stay in its original spot until other offset properties are set. A related example shows an SVG icon sitting neatly in the middle of a paragraph, and it even moves along with the text when the viewport resizes, since it has no explicit positioning instructions — just a directive to avoid affecting surrounding content.
It looks odd at first, but the logic holds up: without specific offsets, the browser relies on the element's static position, which flexbox alignment still influences.
