Placeholders and Static Position of Abspos Flex Items

Spec:
css3-flexbox
Owner:
fantasai, TabAtkins
Status:
Resolved
Added:
2012-07-23
Issue:
http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012
Proposal:
http://lists.w3.org/Archives/Public/www-style/2012Jul/0419.html

Background

Problem Statement

How should the static position of absolutely-positioned children of a flex container be determined?

Note: This does not affect absolutely-positioned children of a flex item.

Proposal(s)

Proposal A
The static position of the abspos item is the head start corner of the flex container. It has no impact on flex layout.
Proposal B
The static position of an abspos item is centered between the margin edges of the previous and next flex items in the line (need to define edge behavior), and has no impact on flex layout such as justification.
Proposal C
The static position of the abspos item is given by a placeholder anonymous flex item, which impacts layout during justification (space-around/space-between).
Proposal D
The static position of an abspos item is a placeholder anonymous flex item whose position coincides with the margin edge of the subsequent flex item (if any, else the preceding flex item, if any, else the main-start cross-start corner) and has no impact on flex layout such as justification.
Proposal E (C#?)
The static position of the abspos item is given by a placeholder anonymous flex item. The justification space between a preceding flex item and a subsequent placeholder item is suppressed.

Use Cases to Consider

Nobody's come up with a use case for using the static position of an absolutely-positioned flex item. There might be reasons to absolutely-position such a child explicitly and have it not affect layout, however.

  1. http://lists.w3.org/Archives/Public/www-style/2012Jul/0262.html (Alex's explanation of the LC spec approach, i.e. proposal C)
  2. http://lists.w3.org/Archives/Public/www-style/2012Jul/0547.html (fantasai's summary/request for information)

Resolution

http://lists.w3.org/Archives/Public/www-style/2012Jul/0605.html