[css-position-3] Absolute positioning - Is the new inset & auto-size behaviour web-compatible? · Issue #11195 · w3c/csswg-drafts (original) (raw)

Skip to content

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sign up

@dshin-moz

Description

@dshin-moz

Implementing justify-self & align-self for abs-positioned elements, we ran into:

Which has something to the effect of:

<!DOCTYPE html>
<style>
.abs {
  position: absolute;
  align-self: stretch;
  height: auto;
  top: auto;
  bottom: auto;
  background: lime;
}
</style>
<div class="abs">Test</div>

align-self: stretch should be a no-op (At least for absolute elements not within flex/grid context) in the old behaviour, but seems to be used by websites in the wild anyway in the linked bugs:

As per the new absolute-positioning steps:

  1. Calculate inset-modified containing block:
  2. Resolving sizes: Definite available size is viewport, no min/max height is given, and since self-alignment is stretch, auto size is stretch size.
  3. Auto margins: N/A
  4. Alignment: Fits exactly in the available space

As per the old steps

  1. Everything is auto, margins zeroed out, top takes its static position value, which is zero
  2. Height is Auto heights for block formatting context roots - Distance between top of the topmost line box and bottom of the bottommost line box, so auto size is basically a shrink-fit size.
  3. Solve for bottom, taking up whatever empty space