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 条评论
登录 后参与评论

相关文章

来自专栏42度空间

【收藏】这么多WEB组件(CSS),攒一个网站够了吧?

总是喜欢简单又精致的东西,美的不繁复也不张扬。这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧?

42014
来自专栏web前端教室

html5 - canvas 简介

什么是Canvas? 1、canvas 元素是html5的核心功能之一,使用 JavaScript 在网页上绘制图像。 2、画布是一个矩形区域,您可以控制其每...

2038
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

21010
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

933
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

1663
来自专栏一“技”之长

标签之美八——网页框架 原

其中属性设置的值可以是百分比,可以是固定值,*符号表示除了已经分配后的剩余空间。上面代码中每个html文件设置不同的背景颜色,效果如下:

841
来自专栏前端黑板报

居中“魔法”总结

作为一个前端程序员,各种居中的需求会经常遇到,比如说文本居中,水平居中,垂直居中,浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。 因...

22110
来自专栏阮一峰的网络日志

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈...

9527
来自专栏Material Design组件

Material Design — 底部导航(Bottom Navigation)

4029
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

1100

扫码关注云+社区