position:absolute 的深入探讨

今天给大家说说,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>

测试结果:

Tips:图中红色边框为html元素,绿色边框为body元素

结论:测试数据发现如果定位的元素的父级(祖父)没有设置position属性的时候,不会参考body进行定位。

为了再次验证我们的结论,我们给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 进行定位。

英文描述如下:

欢迎沟通交流~HTML5学堂

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-08-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31810
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25310
来自专栏落花落雨不落叶

canvas画简单电路图

62011
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2577
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2536
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4064
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3869
来自专栏杨龙飞前端

scrollto 到指定位置

2514
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2782
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3145

扫码关注云+社区