[转] 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官方文 ...
随机推荐
- SpringMVC返回JSON方案
SpringMVC已经大行其道.一般的,都是返回JSP视图.如果需要返回JSON格式,我们大都掌握了一些方法. 在ContentNegotiatingViewResolver之前,一般使用XmlVie ...
- 浅谈范德蒙德(Vandermonde)方阵的逆矩阵的求法以及快速傅里叶变换(FFT)中IDFT的原理
浅谈范德蒙德(Vandermonde)方阵的逆矩阵与拉格朗日(Lagrange)插值的关系以及快速傅里叶变换(FFT)中IDFT的原理 标签: 行列式 矩阵 线性代数 FFT 拉格朗日插值 只要稍微看 ...
- Libre 6010「网络流 24 题」数字梯形 (网络流,最大费用最大流)
Libre 6010「网络流 24 题」数字梯形 (网络流,最大费用最大流) Description 给定一个由n 行数字组成的数字梯形如下图所示.梯形的第一行有m 个数字.从梯形的顶部的m 个数字开 ...
- java Random.nextInt()方法
转: java Random.nextInt()方法 lic int nextInt(int n) 该方法的作用是生成一个随机的int值,该值介于[0,n)的区间,也就是0到n之间的随机int值,包含 ...
- linux读写锁
一.概述 读写锁与互斥量的功能类似,对临界区的共享资源进行保护!互斥量一次只让一个线程进入临界区, ...
- Hadoop实战:Hadoop分布式集群部署(一)
一.系统参数优化配置 1.1 系统内核参数优化配置 修改文件/etc/sysctl.conf,使用sysctl -p命令即时生效. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- java基础知识学习--------之枚举类型(1)
枚举类型的概念: /** * 目的:枚举类型 * @author chenyanlong * 日期:2017/10/22 * 网址:http://blog.csdn.net/sup_heaven/ar ...
- Go_21: Golang 中 time 包的使用二
常量声明: const TimeLayout = "2006-01-02 15:04:05" 这是个奇葩,必须是这个时间点,据说是 go 诞生之日, 记忆方法:6-1-2-3-4- ...
- How To Crawl A Web Page with Scrapy and Python 3
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...
- mybatis入门基础----高级映射(一对一,一对多,多对多)
阅读目录 一:订单商品数据模型 二.一对一查询 三.一对多查询 四.多对多查询 回到顶部 一:订单商品数据模型 1.数据库执行脚本 创建数据库表代码: CREATE TABLE items ( id ...