What width does an absolutely positioned element take when both left: 0 and right: 0 are set and width is auto, and what happens when a width is also specified?

## Three unknowns, one equation Along the horizontal axis, an absolutely positioned box has to satisfy a simple sum: `left + margin-left + border + padding + width + padding + border + margin-right + right` equals the width of the containing block. The browser solves for whatever is `auto`. Which values you leave `auto` decides which behaviour you get. ## Both insets, auto width — the stretch Leave `width: auto` and give both `left` and `right` values, and `width` is the only unknown, so the box stretches to fill whatever is left over. This is the mechanism behind the most common absolute-positioning idiom: ```css .overlay { position: absolute; inset: 0; /* top, right, bottom, left all 0 */ background: rgb(0 0 0 / 0.5); } ``` The overlay has no declared size yet fills its containing block exactly, on both axes — the vertical equation works identically with `top`, `bottom` and `height`. Without the opposing insets, `width: auto` on an out-of-flow box means shrink-to-fit, and the same element would collapse to its content. Non-zero insets work the same way: `left: 16px; right: 16px` produces a box inset 16px from each side of the containing block whatever its width, with no percentage arithmetic and no `calc()`. ## Adding a width — over-constraint Declare `left`, `right` *and* `width` with non-auto margins and there are no unknowns left, but the numbers rarely add up. CSS calls this **over-constrained** and resolves it deterministically rather than by error: the used value of `right` is discarded and recomputed when the containing block's `direction` is `ltr`. In a right-to-left containing block, `left` is dropped instead. Vertically, the same rule discards `bottom`. So `left: 0; right: 0; width: 200px` gives you a 200px box flush to the left edge — the `right: 0` looks like it was ignored, because it was. This is a frequent source of "why is my right offset doing nothing", and the answer is that the box was over-specified and the writing direction decided which declaration lost. ## Auto margins — the centring escape hatch The one case where over-specification is *productive* is when both horizontal margins are `auto`. Then the leftover space is not assigned to an inset but split equally between the two margins, and the box centres inside the space between the insets: ```css .centred { position: absolute; inset: 0; margin: auto; width: 320px; height: 200px; } ``` That centres the box both horizontally and vertically inside its containing block. Note the vertical half: `margin: auto` centres vertically here in a way it never does in normal flow, precisely because the absolute positioning equation has `top`, `bottom` and a definite `height` to work with. It needs a definite size on the axis — with `height: auto` there is no leftover space to split and the box stretches instead. If splitting evenly would make the margins negative — the box is wider than the space between the insets — the spec falls back to setting the start-side margin to zero and solving for the other, so the box overflows the end side rather than being centred. ## One inset only For completeness: with only `left` set and `right: auto`, the box is placed from the left and sized shrink-to-fit; the right edge lands wherever the content ends. With only `right` set, the box's right edge is pinned and it grows leftward. This is how you right-align an out-of-flow badge without knowing its width. ## Choosing between the two idioms Stretching with opposing insets is preferable to `width: 100%` on an absolutely positioned element whenever the box has margins, borders or insets of its own: `width: 100%` measures the containing block and then adds those extras on top, overflowing, while opposing insets solve for the space that is actually available. It also survives a change in the inset values without any recalculation. ## Interview shape This is usually asked as a prediction: "what does this render?" over a snippet with `left`, `right` and `width` all set. The strong answer names the over-constrained rule *and* the direction dependence, then adds the auto-margin case as the exception — showing that the behaviour is a solved equation rather than a set of memorised special cases.