当父级是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 ...
随机推荐
- EF并非我们想象的那么智能
我之前在项目中用EF读取一个视图的数据,页面展示出现重复数据,当时百思不得其解,跟踪代码,数据读取时取到的数据并不是重复,为什么在前台显示就有重复了呢,我当时就在业务层将数据去重,但取到的数据跟数据库 ...
- node平台截取图片模块——jimp
前几天介绍了一个简单的截图模块——iamges,虽然简单,但是功能还是有很多局限的地方. jimp的优势:1.简单,2.支持回调方式和ES6(promise)语法也可以链式调用 3. 丰富的api ...
- python函数基础 与文件操作
函数的定义 函数是通过赋值传递的,参数通过赋值传递给函数.def语句将创建一个函数对象并将其赋值给一个变量名,def语句的一般格式如下: def function_name(arg1,arg2[,.. ...
- 查看/关闭SElinux （原创帖，转载请注明出处）
查看SELinux状态: 1 /usr/sbin/sestatus -v | grep "SELinux status:" ##如果SELinux status参数为enabl ...
- Javascript > Eclipse > problems encountered during text search
Reproduce: Ctrl + H, Select "File Search", will encounter eclipse kinds of bug/error alert ...
- Netsuite > Employee Record Name维护规则
Employee Record Name 维护规则 - 在NS系统设计中,默认的Field展现是:First Name, Middle Name, Last Name - 在General Prefe ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- HDU 1272 小希的迷宫 并查集
小希的迷宫 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- sqoop的使用
1.sqoop的安装 1.1 与hadoop和hive的集成,修改/opt/cdh/sqoop-1.4.5-cdh5.3.6/conf/sqoop-env.sh 文件
- 初窥Linux 之 我最常用的20条命令
魏公 SecureCRTuname -avisftppartition,fsshell kshell,bshelluser,groupIPTables文件数,内核参数tail,less/var/log ...