[csswg-drafts] Absolute position respecting the padding of the parent element (#12929)

KarelDiaz has just created a new issue for https://github.com/w3c/csswg-drafts:

== 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

```css
.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). |

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12929 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 10 October 2025 17:03:16 UTC