前言

温故而知新。遇到offsetParent这个知识点，发现书上讲的不够详细。于是看了看豪情的博客，发现讲得很具体，收藏一下。

正文

不同情况

  • 没有已定位的父节点，且自身position:relative的DIV元素的offsetParent为BODY
  • 没有已定位的父节点，且自身position: absolute的DIV元素的offsetParent为BODY
  • 没有已定位的父节点，且自身position: fixed的DIV元素的offsetParent为BODY
  • 没有已定位的父节点，且自身position: static的DIV元素的offsetParent为BODY
  • 拥有一个已定位的父节点，且自身position:
    relative的DIV元素的offsetParent为其最近被定位的祖先
  • 拥有一个已定位的父节点，且自身position:
    absolute的DIV元素的offsetParent为其最近被定位的祖先
  • 拥有一个已定位的父节点，且自身position: fixed的DIV元素的offsetParent为BODY
  • 拥有一个已定位的父节点，且自身position:
    static的DIV元素的offsetParent为其最近被定位的祖先
  • 在table之内，td与table都没有定位，且自身position:
    relative的DIV元素的offsetParent为BODY
  • 在table之内，td与table都没有定位，且自身position:
    absolute的DIV元素的offsetParent为BODY
  • 在table之内，td与table都没有定位，且自身position:
    fixed的DIV元素的offsetParent为BODY
  • 在table之内，td与table都没有定位，且自身position:
    static的DIV元素的offsetParent为其最近的TD、TH元素
  • 在table之内，td相对定位，且自身position:
    relative的DIV元素的offsetParent为其最近的TD、TH元素
  • 在table之内，td相对定位，且自身position: absolute的DIV元素的offsetParent为BODY
  • 在table之内，td相对定位，且自身position: fixed的DIV元素的offsetParent为BODY
  • 在table之内，td相对定位，且自身position:
    static的DIV元素的offsetParent为其最近的TD、TH元素
  • 在table之内，table相对定位，且自身position:
    relative的DIV元素的offsetParent为其最近的TABLE元素
  • 在table之内，table相对定位，且自身position:
    absolute的DIV元素的offsetParent为其最近的TABLE元素
  • 在table之内，table相对定位，且自身position: fixed的DIV元素的offsetParent为BODY
  • 在table之内，table相对定位，且自身position:
    static的DIV元素的offsetParent为其最近的TD、TH元素

总结

  1. position为fixed元素是没有offsetParent，但firefox统一返回body。
  2. position为absolute, relative的元素的offsetParent总是为其最近的已定位的元素,
    没有找最近的td,th元素，再没有找body。
  3. position为static的元素的offsetParent则是先找最近的td,th元素，再没有找body。
  4. body为最顶层的offsetParent。

个人观点

用的比较多的是在没有table的情况下。所以很好记得。

原文地址

offsetParent算法分析

offsetParent 到底是哪一个？的更多相关文章

  1. [转] offsetParent 到底是哪一个？

    正文 不同情况 没有已定位的父节点,且自身position:relative的DIV元素的offsetParent为BODY 没有已定位的父节点,且自身position: absolute的DIV元素 ...

  2. 容器（vector）、数组、new创建的动态数组，你到底用哪一个（执行效率分析）

    1.问题的提出 在没有了解vector之前,动态数组一般都是又new创建的.在了解vector后发现vector竟是那样方便好用,但方便的同时却是以牺牲执行效率为代价的.网上对vector和array ...

  3. Java学习----到底调用哪一个方法(多态)

    public class Father { public void print() { System.out.println("Father:print()"); } } publ ...

  4. 做量化模型Matlab、R、Python、F#和C++到底选择哪一个？

    MATLAB是matrix&laboratory两个词的组合,意为矩阵工厂(矩阵实验室).是由美国mathworks公司发布的主要面对科学计算.可视化以及交互式程序设计的高科技计算环境.它将数 ...

  5. 后移动互联网时代：到底还要不要开发一个App？

    后移动互联网时代,到底是什么样的一个时代? 首先,后移动互联网时代中,产生头部应用的几率变小了,像微信这样巨头式的App很难在产生第二个.其次,后移动互联网时代,物联网发展迅速,所有的智能硬件都需要一 ...

  6. CVE-2013-1347：从入门到放弃之调试分析令人崩溃的 Microsoft IE CGenericElement UAF 漏洞

    0x01 2013 年 "水坑" APT 攻击事件 在 2013 年 5 月,美国的劳工部网站被黑,利用的正是 CVE-2013-1347 这个漏洞,在当时导致大量使用 IE8 访 ...

  7. C# MVC 5 - 生命周期（应用程序生命周期&请求生命周期）

    本文是根据网上的文章总结的. 1.介绍 本文讨论ASP.Net MVC框架MVC的请求生命周期. MVC有两个生命周期,一为应用程序生命周期,二为请求生命周期. 2.应用程序生命周期 应用程序生命周期 ...

  8. Javascript 严格模式详解

    转自http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 一.概述 除了正常运行模式,ECMAscript 5添加了第二 ...

  9. Apache Cordova开发Android应用程序——番外篇

    很多天之前就安装了visual studio community 2015,今天闲着么事想试一下Apache Cordova,用它来开发跨平台App.在这之前需要配置N多东西,这里找到了一篇MS官方文 ...

随机推荐

  1. 利用VHDL读写file文件

    library ieee;     use std.textio.all;     use ieee.std_logic_textio.all;     use ieee.std_logic_1164 ...

  2. hibernate详解

    Hibernate原理与应用 主要内容 1.引入 2.安装配置 3.基本概念和CURD 4.HQL和Criteria 5.关联映射 6.继承映射 7.集合映射 8.懒加载 9.缓存 10.事务 11. ...

  3. [Leetcode][Python]29: Divide Two Integers

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 29: Divide Two Integershttps://oj.leetc ...

  4. 面向对象程序设计-C++_课时21引用

    数据类型 & 别名=对象名; #include <iostream> using namespace std; int * f(int * x) { (*x)++; return ...

  5. 面向对象程序设计-C++_课时12访问限制

    private: 只有这个类(相同的类,不同的对象也可以)的成员函数可以访问这些成员变量或函数 public: 任何人都可以访问 protected: 只有这个类以及它的子子孙孙可以访问

  6. SPOJ QTREE4 lct

    题目链接 这个题已经处于花式tle了,改版后的spoj更慢了.. tle的话就多交几把... #include <iostream> #include <fstream> #i ...

  7. 权威指南之脚本化http

    使用javascript代码操作http是可行的.当用脚本设置window对象的location属性或调用表单对象的submit方法时,都会初始化http请求.这两种情况下,浏览器会加载新页面. aj ...

  8. 浅谈Spring(一)

    一.Spring引言 Spring是一款轻量级框架,代码入侵量很小,并且还是众多优秀的设计模式的组合(工厂.代理.模板.策略). 特点: 1.方便解耦,简化开发 通过Spring提供的IoC容器,我们 ...

  9. TOJ 1702.A Knight's Journey

    2015-06-05 问题简述: 有一个 p*q 的棋盘,一个骑士(就是中国象棋里的马)想要走完所有的格子,棋盘横向是 A...Z(其中A开始 p 个),纵向是 1...q. 原题链接:http:// ...

  10. Hibernate总结（二）---hibernate中的各种映射

    知识的准备: (参考:汤阳光Hibernate3.6(基础)) 一.浅谈javaBean之间的关系 存在的关系: 1.关联(一对一.一对多.多对一.多对多) 2.聚合/组合(最后考虑) 3.继承 所以 ...