在css的绝对定位问题中如果绝对定位的元素没有最近已定位的父元素，那么它相对与初始包含块进行定位。其中初始包含块是是呢？body? html? viewport?
如图所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html
{
border:2px groove #F0F;
padding:50px;
margin:50px;
}
body
{
border:2px dotted red;
margin:20px;
padding:20px;
}
div
{
border:1px solid blue;
background-color:lightblue;
height:300px;
}
img
{
position:absolute;
left:0px;
bottom:0px;
}
</style>
</head>
<body>
i am okok i am okoki am okok i am okok i am okok i am okok i am okok i am okok i am okoki am okok i am okok i am okok i am okok i am okok okok i am okok i am okokokok i am okok i am okokokok i am okok i am okokokok i am okok i am okok
<img src="12.jpg" width="300px" height="300px">
<div>everything will be ok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okokthis is okok this is okok this is okok this is okok</div>
</body>
</html>
可以看出此时top:0px left:0px 的图像既不相对与body也不想对于html,而是相对与视窗屏幕的左上角。
如果把top:0px改成bottom:0px, 这是相对与第一屏的左下角(即使有下拉列表)。
如果要想让定位得img相对于html或body,有两种方法:
1.把html,body{margin:0px; padding:0px}
2.body设置为position:relative显示指定已body元素作为初始包含块。