[转] 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官方文 ...
随机推荐
- Maven项目打Jar包,如何添加依赖
之前介绍了使用spring-boot-maven-plugin插件打jar包,会把所有的依赖文件都导入,然后变成了一个可执行的jar包.这样的不好的地方就是,我实际上并不需要把依赖的jar包也打入到生 ...
- MT【171】共轭相随
$\textbf{证明:}$对任意$a,b\in R^+$, $\dfrac{1}{\sqrt{a+2b}}+\dfrac{1}{\sqrt{a+4b}}+\dfrac{1}{\sqrt{a+6b}} ...
- 【BZOJ1449】[JSOI2009]球队收益(网络流,费用流)
[BZOJ1449][JSOI2009]球队收益(网络流,费用流) 题面 BZOJ 洛谷 题解 首先对于一支队伍而言,总共进行多少场比赛显然是已知的,假设是\(n_i\)场,那么它的贡献是:\(C_i ...
- 洛谷 P1457 城堡 The Castle 解题报告
P1457 城堡 The Castle 题目描述 我们憨厚的USACO主人公农夫约翰(Farmer John)以无法想象的运气,在他生日那天收到了一份特别的礼物:一张"幸运爱尔兰" ...
- 解题:HDU 5868 Different Circle Permutation
题面 先往上套Burnside引理 既然要求没有$\frac{2*π}{n}$的角,也就是说两个人不能挨着,那么相当于给一个环黑白染色,两个相邻的点不能染白色,同时求方案数.考虑$n$个置换子群,即向 ...
- [IOI2018] werewolf 狼人
[IOI2018] werewolf 狼人 IOI2018题解 (其实原题强制在线,要用主席树) 代码: 注意: 1.下标从0~n-1 2.kruskal重构树开始有n个节点,tot从n开始,++to ...
- c++并发编程之条件变量(Condition Variable)
条件变量(Condition Variable)的一般用法是:线程 A 等待某个条件并挂起,直到线程 B 设置了这个条件,并通知条件变量,然后线程 A 被唤醒.经典的「生产者-消费者」问题就可以用条件 ...
- 装饰器python
装饰器 你是一家视频网站的后端开发工程师,你们网站有以下几个版块 1 2 3 4 5 6 7 8 9 10 11 def home(): print("---首页----" ...
- 风控3—iv算法详细解释
python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...
- Java基础-JAVA中常见的数据结构介绍
Java基础-JAVA中常见的数据结构介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是数据结构 答:数据结构是指数据存储的组织方式.大致上分为线性表.栈(Stack) ...