Absolute position respecting the padding of the parent element

[KarelDiaz]

CSS Feature Request Proposal: position-context

Subject: Proposal for a new CSS property to enforce padding context for absolutely positioned elements.

---

1. Introduction and Problem Statement

When an element is positioned absolutely (position: absolute), its positioning coordinates (top, right, bottom, left) are calculated relative to the border box of its nearest positioned ancestor.

This means the element ignores the padding of the parent. To position the child within the padding, the developer is forced to manually duplicate the parent's padding values into the child's positioning properties (e.g., if padding: 20px;, one must use top: 20px; left: 20px;).

This manual adjustment is:

• Fragile: A change in the parent's padding requires a corresponding manual change on the child.
• Non-semantic: It breaks the separation of concerns between the parent's spacing and the child's position.
• Inefficient: It complicates the use of responsive or variable-based padding values.

---

2. Proposed Solution: The position-context Property

We propose a new CSS property, named position-context, to be applied to the absolutely positioned child element. This property would define the contextual box used for calculating its top, right, bottom, and left offsets.

Proposed Syntax

.child-absolute {
  position: absolute;
  position-context: <value>;
}

Proposed Values for the CSS Property position-context

This table defines the contextual box used for calculating the offsets (top, left, etc.) of an absolutely positioned element. Note: This property is a feature proposal and does not currently exist in standard CSS.

Value	Description	Contextual Box Used for Positioning
border-box	(Default)	Coordinates are calculated from the outer edge of the border of the positioned ancestor. (Current standard CSS behavior).
padding-box	(NEW)	Coordinates are calculated from the inner edge of the padding of the positioned ancestor. (The desired behavior to respect the parent's padding).
content-box		Coordinates are calculated from the inner edge of the content area of the positioned ancestor (inside padding and border).

[Crissov]

Just for the reference: box-edge keywords in CSS Box Model introduces <visual-box> for the proposed set of keywords.

Wouldn’t it be simpler and more consistent if, like box-sizing, the containing / anchoring box would get the property?

[Loirooriol]

Presumably this would just change the containing block (so it would also affect percentages and such).

Then it seems easier to implement to have the property apply to the containing block and not to the abspos.