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. django 其他地址访问不了问题

    启动的时候 使用 python manage.py runserver 0.0.0.0:8000  即可接收所有IP访问

  2. 从零开始调用一个手机号归属地查询API

    自从过上程序员的生活,身边总是或多或少的提及一些API(应用程序接口),网上各种入门教程.实例大把大把,有的只是贴上部分代码,也不给注释, 写Demo的时候连编译都无法通过.下面我从小白开始来介绍下调 ...

  3. CSS3 Border-image

    CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color,只剩下最后一个边框图片border-image.今天我们就一起来学习这个border ...

  4. Centos7下dnscrypt-proxy安装

    DNS劫持指的是"一些设备"会拦截DNS解析请求,并将错误的DNS信息返回给主机:DNS污染指的是"一些设备"会将错误的域名信息下发至公共的DNS服务器中(比如 ...

  5. linux系统一键安装phpstudy的lnmp环境

    phpStudy for Linux 支持Apache/Nginx/Tengine/Lighttpd, 支持php5.2/5.3/5.4/5.5切换 已经在centos-6.5,debian-7.4. ...

  6. Logstash学习-配置语法

    区段(section) Logstash 用{}来定义区域.区域内可以包括插件区域定义,你可以在一个区域定义多个插件,插件区域内则可以定义键值对设置. 数据类型 Logstash支持少量的数据值类型: ...

  7. 【转】Tomcat 的三种(bio,nio.apr) 高级 Connector 运行模式

    转载地址:http://www.oschina.net/question/54100_16195   tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成功,可以看他的启动控制台,或 ...

  8. Manthan, Codefest 16 -A Ebony and Ivory

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  9. Codeforces617 E . XOR and Favorite Number(莫队算法)

    XOR and Favorite Number time limit per test: 4 seconds memory limit per test: 256 megabytes input: s ...

  10. linux下给网卡加VLAN标签和私网地址

    1.加载8021q协议 moprobe 8021q 2.安装必要的包 yum -y groupinstall base linux 3.添加私网地址(写到开机启动项) vconfig add bond ...