There is such a sentence in the CSS tutorial of the rookie tutorial
The position of an absolutely positioned element is relative to the closest positioned parent element. If the element does not have a positioned parent element, then its position is relative to <html>
I have always used this sentence as the standard for absolute positioning. Until today, I discovered by accident that the ancestor elements were not positioned as absolute positioning elements. Whether it is positioning or width and height is not relative to, but the browser window is the viewport.
demo:
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<style>
html {
min-width: 1200px;
}
.box {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100px;
background-color: yellow;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
After setting the width, the width and positioning of the box are always relative to the browser window size, not HTML.
Later, I checked the MDN document and found that the definition of the rookie tutorial is not accurate . It is written in MDN like this:
Absolutely positioned elements are positioned relative to the nearest non-static ancestor element. When such an ancestor element does not exist, it is relative to the ICB (inital container block, initial containment block).
Initial inclusion block:
- The containing block of the root element is a rectangle, called the initial containing block;
- For [Continuous Media], the size of the initial containing block is equal to the size of the viewport, and the starting point is the origin of the canvas;
- The direction of the initialization containing block is the same as the direction of the root element;
- The initial inclusion block is not a viewport, just the same size;
Summary: If there is no ancestor element that is not statically positioned in the absolutely positioned element, the element is not positioned relative to the initial containing block, and the size and direction of the initial containing block are the same as the viewport.