position：absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级（祖父）元素没有设置position属性的时候，该元素的position：absolute会参考body进行定位。

换句话说是如果父级设置了position（且值为非static），参照（最近的）父级的内容区域的左上角为初始点，结合top left right bottom 进行定位； 如果没有设置，往其父级继续寻找，直到找到为止，如果一直没有，则相对与body进行定位（我猜想是这样的，但是不一定是对哦~~）。

测试实例：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        /*正常是不能这么设置的，这边主要是用来测试*/
        html {
            margin: 20px;
            border: 20px solid red;
        }
        /*正常是不能这么设置的，这边主要是用来测试*/
        body {
            height: 400px;
            margin: 30px;
            border: 20px solid green;
        }
        .wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="wrap">梦幻雪冰</div>
</body>
</html>

为了再次验证我们的结论，我们给body设置position属性（值为非static），看看结果会是如何？

测试实例：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        /*正常是不能这么设置的，这边主要是用来测试*/
        html {
            margin: 20px;
            border: 20px solid red;
        }
        /*正常是不能这么设置的，这边主要是用来测试*/
        body {
            position: relative;
            height: 400px;
            margin: 30px;
            border: 20px solid green;
        }
        .wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="wrap">梦幻雪冰</div>
</body>
</html>

测试结果：

Tips：图中红色边框为html元素，绿色边框为body元素

看到结果，发现如果给body设置了position属性就正常了，所以我之前的猜想是错误的，不是参考body进行定位的。

那么position：absolute是参考哪一个父级（祖父）元素进行定位的？

当给元素设置absolute的时候，它会往上查找 absolute 元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么就是根据该父元素进行的定位，否则将会继续查找该父元素的父元素，一直追溯到某个父元素具备不为 static 的 position 值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。

												


											
position：absolute 的深入探讨的更多相关文章
	

    
								
  1. 解决绝对定位div  position: absolute 后面的<a>  Link不能点击
		
    今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...
    
		
    2. 
						
  2. position absolute 绝对定位 设置问题
		
     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...
    
		
    3. 
						
  3. 定位 position: absolute & relative
		
    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
    
		
    4. 
						
  4. position:absolute绝对定位解读
		
    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...
    
		
    5. 
						
  5. position:absolute/relative/fixed小结
		
    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
    
		
    6. 
						
  6. css position:absolute 如何居中对齐
		
    写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center
    
		
    7. 
						
  7. 【总结】我所整理的float, inline-block还有position:absolute
		
    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...
    
		
    8. 
						
  8. 关于position:absolute的困惑
		
    今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...
    
		
    9. 
						
  9. position:absolute和float会隐式的改变display类型
		
    position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python 3.6.3 利用 Dlib 19.7 和 opencv 实现人脸68点定位                                                                                                                                                  进行人脸识别
			
    0.引言 介绍利用Dlib官方给的人脸识别预测器"shape_predictor_68_face_landmarks.dat"进行68点标定,利用OpenCv进行图像化处理,在人脸 ...
    
			
    2. 
						
  2. 切换用户，显示用户名， 调用Windows系统命令
			
    CONN 用户名/密码 CONN sys/密码 AS SYSDBA | SYSOPER SHOW USER SELECT * FROM 用户名.表名; 调用Windows系统命令: HOST Wind ...
    
			
    3. 
						
  3. Parallels Desktop 12 for Mac 破解版
			
    Parallels Desktop for Mac 是功能最强大灵活度最高的虚拟化方案,无需重启即可在同一台电脑上随时访问Windows和Mac两个系统上的众多应用程序.从仅限于PC的游戏到生产力软件 ...
    
			
    4. 
						
  4. plugins/python/uwsgi_python.h:2:20: fatal error: Python.h: No such file or directory
			
    装一台新服务器环境的时候,装uwsgi报错: plugins/python/uwsgi_python.h:2:20: fatal error: Python.h: No such file or di ...
    
			
    5. 
						
  5. iOS知识点集合--更改(2)
			
    3.nsmutablearray *a 如果直接赋值 a = @[@"d",@""]; 这个时候a 是不可变的 字典也是如此 2.如果接口调用错误的话 打印re ...
    
			
    6. 
						
  6. ArcGIS 网络分析[1.1] 创建用于网络分析用的线类型shp文件[这个太基础了吧！]
			
    具体的准备,在上一篇就说过了,不再赘述. 阅读本篇前,需要的预备知识是:ArcGIS创建各种矢量数据的方法,了解地理坐标与投影坐标 本篇只创建单一的线数据,至于点数据,以后进行复杂的网络分析时再添加进 ...
    
			
    7. 
						
  7. grep 与 find 简单命令
			
    在使用linux的时候,经常会用到查找文件或者查找文本,下面介绍两个命令. grep 使用方法: // 在当前目录下递归查找class字符串 grep "string" -r .  ...
    
			
    8. 
						
  8. java 修饰符之修饰范围
			
    不同修饰符有不同修饰范围,为了对修饰符有更明确的认识,使用表格总结. 抽象\关键字 public protected private static final abstract default 类 √ ...
    
			
    9. 
						
  9. vue基础学习（一）
			
    01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...
    
			
    10. 
						
  10. C#学习之设计模式：工厂模式
			
    最近研究一下设计模式中工厂模式的应用,在此记录如下: 什么是工厂模式? 工厂模式属于设计模式中的创造型设计模式的一种.它的主要作用是协助我们创建对象,为创建对象提供最佳的方式.减少代码中的耦合程度,方 ...
    
			
    11.