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. MIL 多示例学习 特征选择

    一个主要的跟踪系统包含三个成分:1)外观模型,通过其可以估计目标的似然函数.2)运动模型,预测位置.3)搜索策略,寻找当前帧最有可能为目标的位置.MIL主要的贡献在第一条上. MIL与CT的不同在于后 ...

  2. SQLServer游标(Cursor) (B)

    游标(Cursor)是处理数据的一种方法,为了查看或者处理结果集中的数据,游标提供了在结果集中一次以行或者多行前进或向后浏览数据的能力.我们可以把游标当作一个指针,它可以指定结果中的任何位置,然后允许 ...

  3. YbSoftwareFactory 代码生成插件【二十五】：Razor视图中以全局方式调用后台方法输出页面代码的三种方法

    上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ...

  4. Qt QObject

    [1]Qt的QObject 1.测试代码如下: #include<QApplication> #include<QPushButton> #include<QDebug& ...

  5. DLL库

    6.阿里云上传.下载:Aliyun.OSS.dll https://help.aliyun.com/ 5.SQLite数据库操作:SQLite.Interop.dll.SQLite.Designer. ...

  6. 前端使用js读取文件

    最近同时问我js能不能读取本地文件: 想起以前看到js读取本地文件的文章,然后自己写了个demo. ps:这有点想Java的IO流,但是又有差别. 首先我们定义一个input标签type=" ...

  7. 学习Git的总结与体会

    学习Git的总结 blog 第一次学习Git是完全按照廖雪峰老师的教程学习的,学的过程中基本上没有遇到什么问题,但是自己实际操作就问题不断了. 首先,还是按照惯例,来膜拜一下廖雪峰老师精简的教程知识吧 ...

  8. Android守护进程

    这几天,一位做Android的朋友和我探讨了一个问题:因为业务需求的原因,在自己的App长时间不使用被kill掉之后,如何让它再重新运行起来. 虽然,我本身很排斥这种做法,有点类似“流氓软件”的行为, ...

  9. Topcoder SRM 683 Div2 B

    贪心的题,从左向右推过去即可 #include <vector> #include <list> #include <map> #include <set&g ...

  10. 图说函数模板右值引用参数(T&&)类型推导规则（C++11）

    见下图: 规律总结: 只要我们传递一个基本类型是A④的左值,那么,传递后,T的类型就是A&,形参在函数体中的类型就是A&. 只要我们传递一个基本类型是A的右值,那么,传递后,T的类型就 ...