当父级是body时，子元素设置position：absolute；定位是根据body还是html呢？
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呢？的更多相关文章
- 关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- 子元素设置margin-top后，父元素跟随下移的问题
子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...
- 解决子元素设置margin-top，效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- 解决：子元素设置margin-top，父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- CSS子元素设置margin-top作用于父容器？
CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...
- 子元素设置margin-top作用到了父元素
子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解
- 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法
内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
随机推荐
- .NET分布式事务处理
在进行数据持久化的时候,我们会经常用到事务处理.一般情况下,ADO.NET中的事务处理就能够满足我们的需要,但是,ADO.NET中的事 务不能同事对多个数据库连接进行原子性的操作:如果在你的业务环境中 ...
- 报表控件NCreport教程：子查询系统设计
数据报表中经常需要用到主从数据关系,比如发票.订单等一类的特殊文件,在报表控件NCreport中也不例外.数据报表至少有一个表头和一个通过 主键和外键关联的相关细节数据集.子查询系统则是通过父数据源驱 ...
- livecd环境下chroot修复系统
今天想升级centos5.7的glibc版本,想当然的把新编译的glibc的libc-2.7.so 复制到/lib64/libc-2.5.so lrwxrwxrwx root root Mar : / ...
- Time crumbles things; everything grows old under the power of Time and is forgotten through the lapse of Time
Time crumbles things; everything grows old under the power of Time and is forgotten through the laps ...
- JSON对象转换问题
今天调用别人接口遇到一个问题,原本约定的data格式为:JSON字符串,但本次返回了一个空字符串"", 大概是这样的 字符串类型的httpResult.data值为字result: ...
- plsql连接本地数据库
1. 下载64位Oracle,解压两文件,解压完成后将文件合并,安装: 2. 下载PL/SQL,安装: 3. 下载instantclient-basic-win32-11.2.0.1.0.zip ...
- 阅读javascript高级程序设计
第一章 : javascript的简介: js的组成: 1.核心(ECMA) ECMA规定了js的 1,语法 2,保留字 3,关键字, 4,对象, 5,类型 6,操作符 7,语句 2.文档对象模型(D ...
- location对象说明
在浏览器的console层输入 location 即可输出该对象的相关信息 location.protocol 协议类型 http/https location.hostname 主机名 loc ...
- Java，double类型转换成String，String装换成double型
今天,老师布置了小系统,银行用户管理系统,突然发现自己的基础知识好薄弱,就把这些记录一下, double类型转化string:Double.toString(double doub); String类 ...
- easyui DataGrid 工具类之 TableUtil class
import java.lang.reflect.InvocationTargetException;import java.util.ArrayList;import java.util.HashM ...