[转] 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元素
总结
- position为fixed元素是没有offsetParent,但firefox统一返回body。
- position为absolute, relative的元素的offsetParent总是为其最近的已定位的元素,
没有找最近的td,th元素,再没有找body。 - position为static的元素的offsetParent则是先找最近的td,th元素,再没有找body。
- body为最顶层的offsetParent。
个人观点
用的比较多的是在没有table的情况下。所以很好记得。
[转] offsetParent 到底是哪一个?的更多相关文章
- offsetParent 到底是哪一个?
前言 温故而知新.遇到offsetParent这个知识点,发现书上讲的不够详细.于是看了看豪情的博客,发现讲得很具体,收藏一下. 正文 不同情况 没有已定位的父节点,且自身position:relat ...
- 容器(vector)、数组、new创建的动态数组,你到底用哪一个(执行效率分析)
1.问题的提出 在没有了解vector之前,动态数组一般都是又new创建的.在了解vector后发现vector竟是那样方便好用,但方便的同时却是以牺牲执行效率为代价的.网上对vector和array ...
- Java学习----到底调用哪一个方法(多态)
public class Father { public void print() { System.out.println("Father:print()"); } } publ ...
- 做量化模型Matlab、R、Python、F#和C++到底选择哪一个?
MATLAB是matrix&laboratory两个词的组合,意为矩阵工厂(矩阵实验室).是由美国mathworks公司发布的主要面对科学计算.可视化以及交互式程序设计的高科技计算环境.它将数 ...
- 后移动互联网时代:到底还要不要开发一个App?
后移动互联网时代,到底是什么样的一个时代? 首先,后移动互联网时代中,产生头部应用的几率变小了,像微信这样巨头式的App很难在产生第二个.其次,后移动互联网时代,物联网发展迅速,所有的智能硬件都需要一 ...
- CVE-2013-1347:从入门到放弃之调试分析令人崩溃的 Microsoft IE CGenericElement UAF 漏洞
0x01 2013 年 "水坑" APT 攻击事件 在 2013 年 5 月,美国的劳工部网站被黑,利用的正是 CVE-2013-1347 这个漏洞,在当时导致大量使用 IE8 访 ...
- C# MVC 5 - 生命周期(应用程序生命周期&请求生命周期)
本文是根据网上的文章总结的. 1.介绍 本文讨论ASP.Net MVC框架MVC的请求生命周期. MVC有两个生命周期,一为应用程序生命周期,二为请求生命周期. 2.应用程序生命周期 应用程序生命周期 ...
- Javascript 严格模式详解
转自http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 一.概述 除了正常运行模式,ECMAscript 5添加了第二 ...
- Apache Cordova开发Android应用程序——番外篇
很多天之前就安装了visual studio community 2015,今天闲着么事想试一下Apache Cordova,用它来开发跨平台App.在这之前需要配置N多东西,这里找到了一篇MS官方文 ...
随机推荐
- AtCoder Grand Contest 030 自闭记
A:阅读. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> ...
- MT【95】由参数前系数凑配系数题2
提示:都是看$a,b$前的系数做的$a=4/3,b=2/3;a+b=\le2$,一样的可以求得$a+b$的最小值-1,当$b=\frac{1}{3},a=\frac{-4}{3}$时取到等号.此题是清 ...
- 洛谷P3703 [SDOI2017]树点涂色(LCT,dfn序,线段树,倍增LCA)
洛谷题目传送门 闲话 这是所有LCT题目中的一个异类. 之所以认为是LCT题目,是因为本题思路的瓶颈就在于如何去维护同颜色的点的集合. 只不过做着做着,感觉后来的思路(dfn序,线段树,LCA)似乎要 ...
- 小记之while循环条件的操作位置
# 判断条件时自减操作 (循环体判断 len == 0) > 执行顺序为,while(len) → len-- → 循环体 while(len--) { == len) { *buf = i2c ...
- Spark记录-Scala异常处理与文件I/O
Scala的异常处理类似许多其他语言(如Java).它不是以正常方式返回值,方法可以通过抛出异常来终止. 但是,Scala实际上并没有检查异常. 当您想要处理异常时,要像Java一样使用try {.. ...
- Intellij IDEA导入web项目详解(解决访问的404)
开始时的首页 点击modules 点击modules界面的Paths 点击Libraries 选择lib文件 点击Facets 选择项目 这就是我404的主要原因,因为小白第一次使用idea 所以很疯 ...
- OpenResty 高阶实战之————Redis授权登录使用短连接(5000)和长连接(500W) 使用连接池AB压力测试结果
一.短连接开始测试 ab -n 5000 -c 100 -k 127.0.0.1/test_redis_short #demo1 Concurrency Level: Time taken for t ...
- 【原创】express3.4.8源码解析之Express结构图
前记 最近为了能够更好的搭建博客,看了开源博客引擎ghost源代码,顺道更深入的去了解express这个出名的nodejs web framework. 所以接下来一段时间对expressjs做一个源 ...
- html5 canvas用图案填充形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 浏览器存储:cookie
Cookie是什么:cookie是指存储在用户本地终端上的数据,同时它是与具体的web页面或者站点相关的.Cookie数据会自动在web浏览器和web服务器之间传输,也就是说HTTP请求发送时,会把保 ...