position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素（包含块）定位，如果没有这样的祖先元素，则以初始包含块进行定位，而初始包含块并不是以<html>或<body>进行定位的。
w3c关于包含块及初始包含块的定义

我们可以做一下测试：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>position:absolute</title>

</head>

<style type="text/css">

    html{

        border: 1px solid red;

        background-color: #ee8;

    }

    body{

        width:300px;

        height: 200px;

        margin: 10px auto;

        background-color: #ccc;

        border: 1px solid blue;

    }

    div{

        width: 100px;

        height: 100px;

        background-color: #3ff;

        position: absolute;

    }

</style>

<body>
　　 body

    <div>div</div>

</body>

</html>

　　

此时的效果如下：

body添加position:relative;
div添加 bottom:0;
效果如下：

html添加position:relative;
div添加 bottom:0;
效果如下：

body和html都不进行定位，div设置bottom:0;
此时效果如下：

所以，当绝对定位元素的祖先元素都没有进行relative/absolute/fixed定位时，是相对于初始包含块来定位的，而初始包含块并不是以<html>或<body>进行定位的。

当父级是body时，子元素设置position：absolute；定位是根据body还是html呢？的更多相关文章

  1. 关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  2. 子元素设置margin-top后，父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  3. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  4. 解决：子元素设置margin-top，父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  5. CSS子元素设置margin-top作用于父容器？

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  6. 子元素设置margin-top作用到了父元素

    子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解

  7. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  8. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

  9. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. 修改后的CopyFile类

    这是修改后的CopyFile类,前面那个类有局限性,它不能复制大文件 这是我第一次写成一个能够实际应用的类,感谢博主们的无私奉献,感谢SeayXu老师的提点 但是这个类也并不是完美无缺,它复制文件没有 ...

  2. EditPlus 3.8.1346 中文版（6月16日更新）

    新的版本增加了粘贴时自动调整行首缩进的功能(“编辑”菜单→剪贴板→粘贴时自动缩进),非常方便.建议各位马上更新.

  3. 前端开发--面试题整理（JS篇）

    1.截取字符串abcdace的acealert('abcdace'.substring(4)); 2.规避javascript多人开发函数重名问题命名空间封闭空间js模块化mvc(数据层.表现层.控制 ...

  4. VS2010 MFC实现启动画面

    1.创建一个SDI工程(或者其他工程都可以). 2.创建一个位图资源命名为IDB_BITMAP1. 3.利用类向导添加一个类CMySplashCtrl(名字可以自己随便取). 4.在MySplashC ...

  5. False 等效值

    False 等效值 下面这些值将被计算出 false (also known as Falsy values): false undefined null 0 NaN 空字符串 ("&quo ...

  6. 给linode 替换操作系统核心

    1.Make sure your package repositories and installed packages are up to date by issuing the following ...

  7. linux 时间管理——概念、注意点(一)【转】

    转自:http://www.cnblogs.com/openix/p/3324243.html 参考:1.http://bbs.eyeler.com/thread-69-1-1.html        ...

  8. linux的mount（挂载）命令详解

    本文介绍mount命令的用法,以及技巧光盘镜像文件.移动硬盘及U盘的方法. 挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用 ...

  9. 1.Linux系统安装

    Linux系统安装系统分区(磁盘分区) 主要管理:文件和目录分类:主分区:最多有4个 扩展分区:1个扩展分区 和主分区最多4个 存放逻辑分区 逻辑分区:存放数据 格式化:高级格式化(逻辑格式化) 写入 ...

  10. 我的CSS布局之旅--持续更新

    虽然我也接触前端一年之久了,但是无奈从切图布局下来的经验还真是很不足,因为之前比赛或者是做小项目时全部都是自己负责设计,所以都是编写边设计,哎呀,也是醉了:或者是有模板,然后从人家上面扒拉下来的,真的 ...