When absolute positioning does not have a parent element with positioning attributes, is it relative to the browser window or body or html?

when absolute positioning does not have a parent element with positioning attributes, is it relative to the browser window or body or html?

the left outer margin of body and html is tested, and it is found that the position of the div block does not affect it. So it"s relative to the browser window?

clipboard.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html{
            margin-left: 100px;
            background-color: yellow;
        }

        body{
            margin-left: 10px;
            background-color: cornflowerblue;
            height: 500px;
        }
        div{
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: deeppink;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    htmlbody
    <div>
        --
    </div>
</body>
</html>
May.08,2021

first MDN above:

The
absolute positioning element is positioned relative to the nearest non-static ancestor element. When such an ancestor element does not exist, the block is initially included relative to the ICB (inital container block,.

and the containing block in which the root element is located is called the initial containing block (ICB), so when the absolutely positioned element does not have a parent element with a non-static positioning attribute, it is positioned relative to the ICB.

the containing block of the root element is usually a viewport (contiguous media) or by the page area (paged media)

CSS2 specification for the definition of containing blocks, it says:

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.

relative to window


relative to body

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea246f-1bc2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea246f-1bc2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?