当父级是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 ...
随机推荐
- 二十八、Java基础--------正则表达式
在对字符串进行处理时一方面可以利用String对象的一些处理方法另一方面可以利用正则表达式,但是一般情况下用String对象方法进行处理起来会相对麻烦一些而正则表达式可以很方便的解决问题.为了更好的学 ...
- java 图片处理工具类
import java.awt.Image; import java.awt.Rectangle; import java.awt.geom.AffineTransform; import ja ...
- 判断一个 int 向量里是否有相同的数（1）
class Solution { public: bool containsDuplicate(vector<int>& nums) { map<int,char> e ...
- winfrom 文字滚动
winfrom 文字滚动 http://www.codeproject.com/Articles/6913/Creating-a-professional-looking-GDI-drawn-cust ...
- 《编写可维护的JavaScript》——JavaScript编码规范（七）
UI层的松耦合 在web开发中,用户界面(UI)是由三个彼此隔离又相互作用的层定义的. HTML用来定义页面的数据和语义. CSS用来给页面添加样式,创建视觉特征. JavaScript用来给页面添加 ...
- centos7安装http服务
1.yum安装http [root@localhost ~]# yum install httpd -y 2.启动http服务 [root@localhost ~]# systemctl start ...
- [TCPIP] IP路由表及选路 Note
TCP/IP IP路由表及选路 1.路由表信息 路由表一般包含信息:目的IP地址.下一站路由器的IP地址.标志. 为数据报传送指定的一个网络接口. 查看路由表信息mac-abeen:~ abeen$ ...
- Life is short
相信不少码农曾看过类似“life is short, use Python”等之类略带调侃意味的小段子(譬如我),而其也并非不无道理.每门编程语言都是合理的存在,都有它们的优点,及缺陷. 码农们也大多 ...
- .dtsi .dts dtc dtb 是什么
基础 .dts: device tree source .dtsi: device tree source include .dts比作源文件,.dtsi比作头文件. dtc是linux源码 /s ...
- Spark学习（二） -- Spark整体框架
标签(空格分隔): Spark 还记得上次的wordCount程序嘛?通过这个小程序,我们来一窥Spark的框架是什么样子的. sc.textFile("/usr/local/Cellar/ ...