Description
Spec References
-
3.5.1. Resolving Insets: the “Inset-Modified Containing Block”
"If only one inset property in a given axis is auto, it is set to zero."
The initial value of top, right, bottom, or left is: auto.
Absolute positioning not only takes a box out of flow, but also lays it out in its containing block (after the final size of the containing block has been determined) according to the absolute positioning layout model:
- First, its inset-modified containing block is calculated, defining its available space.
- Next, its width and height are resolved against this definite available space, as its preferred size
Scenario
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#parent {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
#child {
position: absolute;
background-color: yellow;
top:0;
right:0;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
BOX
</div>
</div>
</body>
</html>Expected Behavior
According to the spec, the inset properties left and bottom, being exclusively auto in their respective axes, should compute to 0. This means:
-
With
topandrightexplicitly set to0, the#parentdiv defines an inset of 0 on all sides, meaning the inset-modified containing block will match the dimensions of the absolute-position containing block (e.g#parentdiv). -
The
#childdiv should size itself to cover the maximum available space, filling the#parentdiv entirely.
Actual Behavior
In both Chrome and Firefox:
- The
#childdiv sizes itself to fit its inline content. - Its position is aligned to the top-right edge of the
#parentdiv padding edge.
This behavior contradicts the specification, as the unset inset properties (left and bottom) are resolved to non-zero values.
Note:
-
This behavior persists even when explicitly setting
leftandbottomtoauto, instead of relying on their implicit initial value ofauto. -
Explicitly setting all inset properties (
top: 0; right: 0; left: 0; bottom: 0;) causes the#child divto correctly cover the#parentdiv, showing that the behavior works as expected when noautovalues are involved.