鍍金池/ 問答/HTML/ 當絕對定位沒有具有定位屬性的父元素時，是相對瀏覽器窗口還是body或者html定

當絕對定位沒有具有定位屬性的父元素時，是相對瀏覽器窗口還是body或者html定位的？

當絕對定位沒有具有定位屬性的父元素時，是相對瀏覽器窗口還是body或者html定位的？

測試了下，給body和html左側(cè)外邊距，結(jié)果發(fā)現(xiàn)div塊的位置并沒有影響。所以是相對瀏覽器窗口定位的？

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>
    結(jié)果可以看出，當絕對定位的元素沒有具有定位屬性的父元素時，其是相對頁面文檔的邊緣來進行定位的（html和body的外邊距并沒造成影響）。
    <div>
        測試絕對定位--無定位屬性的父元素時的相對定位對象
    </div>
</body>
</html>
回答
編輯回答
愚念

相對于 body

2017年12月8日 23:53
編輯回答
空白格

相對于window定位

2017年10月18日 16:05
編輯回答
雨蝶

首先MDN上原話：

絕對定位元素相對于最近的非 static 祖先元素定位。當這樣的祖先元素不存在時，則相對于ICB（inital container block, 初始包含塊）。

而根元素所在的包含塊就叫初始包含塊（ICB），所以也就是說當絕對定位的元素沒有非 static定位屬性的父元素時，相對于ICB定位。

根元素的包含塊一般是視口（連續(xù)媒體）或者由頁面區(qū)域（paged media）

CSS2規(guī)范對于包含塊的定義中說到：

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.
2018年6月4日 09:28