position
为absolute
的元素会相对于距离最近的position
为relative/fixed/absolute
的上级元素进行定位,如果上级元素都没有position
属性,那么则相对于初始包含块定位。
初始包含块不是body
元素也不是html
元素,而是html
元素的包含块(the initial containing block),指的是以整个 canvas
(渲染内容的空间) 的坐标原点(左上)为基准,以 viewport
(也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。
想详细了解可以前往w3c关于包含块及初始包含块的定义。
下面是测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>例子</title>
<style type="text/css">
html{
background-color: yellow;
border: 5px solid black;
}
body{
width: 600px;
height: 600px;
background-color: grey;