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. Java import以及Java类的搜索路径

    如果你希望使用Java包中的类,就必须先使用import语句导入.import语句与C语言中的 #include 有些类似,语法为:    import package1[.package2-].cl ...

  2. django静态文件配置

    开发环境配置 需要下面几个步骤 1. 在app目录下创建static目录,将静态文件和相关文件夹放到此目录下,如your_app/static/img等 2. 确保settings.py中的INSTA ...

  3. C#抽象方法和虚拟方法理解

    http://www.cnblogs.com/denylau/archive/2010/04/11/1709573.html http://www.cnblogs.com/naariah/archiv ...

  4. ios 使用AFN上传图片到服务器

    AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; manager.responseSe ...

  5. winform label文本转换为图片 、Picturebox+label合并转换为图片

    public Form1() { InitializeComponent(); //label存入Picturebox pictureBox1.Controls.Add(label1); pictur ...

  6. java在图片上添加文字

    业务需求要在图片上添加水印.下面粘出代码供自己和大家分享 package com.pro.drawTextOnImg; import java.awt.Color; import java.awt.F ...

  7. ReportService未指定 OverwriteDataSources

    报表服务器部署好之后,查看报表就显示ConnectionString 属性尚未初始化. 然后重启部署并查看部署时控制台的输出信息,发现之前的部署成功消息是假象,实际上部署的时候有一个警告: 不能将数据 ...

  8. Linux网络配置基础

    linux网络配置常见有两种:桥接模式(Bridge)与NAT模式,还有一种Host-Only模式由于其局限性通常被舍弃就不加以说明了,下面我们介绍下桥接模式(Bridge)和NAT模式. 桥接模式( ...

  9. CocoaPods的安装和使用

    一. CocoaPods简介 CocoaPods是一个用来帮助我们管理第三方依赖库的工具.在开发iOS应用时,会经常使用第三方类库,比如SDWebImage.AFNetworking等等,手动的下载与 ...

  10. FMDB

    一.FMDB简介 1.FMDB简介 iOS中原生的SQLite API在进行数据存储的时候,需要使用C语言中的函数,操作比较繁琐.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB. ...