CSS gives you four ways to place elements: absolute/relative positioning, floats, Flexbox, and Grid — each suited to a different job.

CSS has accumulated several layout systems over the years, and each one was invented to solve a specific problem. Knowing which tool fits which job is half the battle:

The first two (positioning and floats) are the older techniques; Flexbox and Grid are the modern workhorses you reach for most. Real layouts often mix them — for example, a Grid for the overall page skeleton with Flexbox inside individual cells.

Go deeper:

• MDN — CSS layout — overview tour through normal flow, positioning, floats, Flexbox, and Grid in one place.

An absolutely positioned element is pulled out of the normal document flow, so surrounding content ignores it — which breaks layouts that need to adapt to screen size.

Normally, block elements stack one after another and push each other around: the "document flow." When you set position: absolute, the element is lifted out of that flow and placed at coordinates you specify (via top, left, etc.). The problem for responsive design — designs that reflow gracefully on phones, tablets, and desktops — is that the rest of the page now behaves as if the element were not there:

• Other elements don't reserve any space for it, so they can end up overlapping it.
• The layout won't reflow when content above changes height.
• Fixed pixel coordinates don't adapt to different viewport sizes.

So when is absolute positioning still the right choice? When nothing else works: positioning something with JavaScript, or deliberately overlapping an element on top of others — think of an always-visible chat button or a tooltip that floats over the content.