[转] 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官方文 ...
随机推荐
- ssm框架配置过程
1.pom.xml配置 1.1<build>标签中配置<plugins>和<resources>,即插件和资源文件 1.2 <properties>标签 ...
- Eclipse启动项目正常,放到tomcat下单独启动就报错的 一例
一个老的ssh的项目,进行二次开发(增加一些新功能)后, 首先用Eclipse中集成的Tomcat启动没有任何问题,但是把启动后的webapps下得目录放到 windows的普通tomcat下单独启动 ...
- python数据分析美国大选项目实战(三)
项目介绍 项目地址:https://www.kaggle.com/fivethirtyeight/2016-election-polls 包含了2015年11月至2016年11月期间对于2016美国大 ...
- python爬虫 scrapy3_ 安装指南
安装指南 安装Scrapy 注解 请先阅读 平台安装指南. 下列的安装步骤假定您已经安装好下列程序: Python 2.7 Python Package: pip and setuptools. ...
- Spark记录-Scala集合
Scala列表 Scala列表与数组非常相似,列表的所有元素都具有相同的类型,但有两个重要的区别. 首先,列表是不可变的,列表的元素不能通过赋值来更改. 其次,列表表示一个链表,而数组是平的. 具有类 ...
- node.js+express,实现RESTful API
node代码如下(exptest.js): var express = require('express'); var bodyParser = require('body-parser'); var ...
- Nginx配置项优化(转载)
(1)nginx运行工作进程个数,一般设置cpu的核心或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor / ...
- Spring RedisTemplate操作-发布订阅操作(8)
@Component("sub") public class Sub implements MessageListener{ @Autowired private StringRe ...
- 一致性哈希算法介绍,及java实现
应用场景 在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括: 轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法(Res ...
- WordPress中使用Markdown和Syntax Highlighter
下载安装插件 在wordpress插件中安装WP Code Prettify. PHP Markdown Extra 下载Extra,并上传安装到wordpress. Code Prettify th ...