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

相关文章

来自专栏前端架构

phpcms V9.6.0版本整合百度ueditor1.4.3.2,包括水图片上传水印

第一步:下载ueitor:http://ueditor.baidu.com/website/download.html

845
来自专栏互联网开发者交流社区

温湿度系统(花葵、库房检测)

753
来自专栏前端知识分享

第2天:HTML常用标签

一、超链接a href:www.baidu.com(跳转页面);id名(锚点跳到相应div位置);01.rar(压缩包) target:_blank(新窗口打...

621
来自专栏转载gongluck的CSDN博客

C++中MFC Tab Control控件的使用详解

1. 新建一个MFC工程, 取名MyTab, 选择Dialog based, 然后Finish. 2. 删除对话框上默认添加的三个控件. 添加Tab Contr...

3596
来自专栏程序员宝库

手机端页面在项目中遇到的一些问题及解决办法

首先你可能会给页面的 html 和 body 增加了 height: 100%, 然后就可能造成 IOS 上页面滑动的卡顿问题。解决方案是:

1153
来自专栏机器学习从入门到成神

Vue-router的配置以及实战(易错点)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

481
来自专栏web

慕课网javascript 进阶篇 第九章 编程练习

1134
来自专栏walterlv - 吕毅的博客

(C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切

发布于 2018-03-31 00:26 更新于 2018-09...

272
来自专栏偏前端工程师的驿站

HTML5魔法堂:全面理解Drag & Drop API

一、前言                                      在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML...

18710
来自专栏前端知识分享

Vue入门---常用指令详解

Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单、易学上手快,近两年也也别流行,发展速度较快,已...

611

扫描关注云+社区