前言

温故而知新。遇到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. Http静态资源的缓存

    最近一段时间一直在研究页面缓存和压缩方面的东西,由于公司服务器使用的是iis6.0,很多性能方面的优化都不支持.所以,就开始尝试着自己写个简单的处理程序. 为了减少服务器带宽的需求,我们要减少客户端与 ...

  2. 愤怒的DZY（二分）

    愤怒的DZY[问题描述]“愤怒的小鸟”如今已经是家喻户晓的游戏了,机智的WJC最近发明了一个类似的新游戏:“愤怒的DZY”.游戏是这样的:玩家有K个DZY,和N个位于不同的整数位置:X1,X2,…,X ...

  3. dijkstra 优先队列最短路模板

    ;;*maxn];,):id(a),dist(b){}        ));        ;i<=n;i++)dist[i]=inf;        dist[st]=;        ;i= ...

  4. oracle tns

    oracle tns 是oracle提供的服务名,设置方法,oracle安装根目录---product----版本选择11.2.0----client1---NETWORK---ADMIN---tns ...

  5. C#高效导出Excel(IList转DataTable,DataSet)

    微软的Excel操作类导出Excel会很慢,此方法简单的把表中内容以字符串的形式写入到Excel中,用到的一个技巧就是"\t". C#中的\t相当于Tab键,写入到Excel中时就 ...

  6. UnicodeEncodeError: 'latin-1' codec can't encode character 解决sae flask 中文问题

    #encoding=utf-8 #中文编码支持 import MySQLdb from flask import Flask, g, request app = Flask(__name__) app ...

  7. Hadoop 架构初探

    对流行Hadoop做了一些最基本的了解,暂时没太大感觉,恩先记点笔记吧. = = Hadoop 基本命令及环境安装 一.下载虚拟机镜像 目前比较流行的有以下三个: (CHD) http://www.c ...

  8. VC MFC 屏蔽ESC和ENTER键关闭对话框

    方法一: 窗体头文件中加入: protected: virtual BOOL PreTranslateMessage(MSG* pMsg); // PreTranslateMessage是消息在送给T ...

  9. C++ Member Functions的各种调用方式

    [1]Nonstatic Member Functions(非静态成员函数) C++的设计准则之一就是:nonstatic member function至少必须和一般的nonmember funct ...

  10. android操作ini工具类

    package com.smarteye.common; import java.io.BufferedReader; import java.io.BufferedWriter; import ja ...