Absolute position respecting the padding of the parent element

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.

Start by reviewing the proposal's description of absolute-positioning offsets and the existing CSS behavior it summarizes. Compare the proposed border-box, padding-box, and content-box contexts with current positioning rules. Done would require resolving the proposal and defining an accepted CSS feature, rather than making a single implementation edit.