当前位置: 首页 > web >正文

offsetParent 深度解析

根据其自身定位情况与父节点的标签类型与定位情况,分为以下二十种情况(IE8, chrome23, opera12的结果):

没有已定位的父节点,且自身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元素
我们可以总结以下几条规律:

a) position为fixed元素是没有offsetParent,但firefox统一返回body。
b) position为absolute, relative的元素的offsetParent总是为其最近的已定位的元素,没有找最近的td,th元素,再没有找body。
c) position为static的元素的offsetParent则是先找最近的td,th元素,再没有找body。
d) body为最顶层的offsetParent。

http://www.xdnf.cn/news/11504.html

相关文章:

  • 继电器的工作原理及驱动电路
  • NSIS 下载
  • bluetooth外围设备找不到驱动程序怎么解决
  • 从数据库中取时间值,遇到:java.sql.Timestamp cannot be cast to java.lang.Long
  • android 9.0广播动态注册和接收流程
  • 5个好用的网络故障排除工具分享_ip tools network utilities
  • Windows11出现找不到d3dx9_25.dll文件如何处理??
  • 循环冗余校验(CRC)
  • MKV格式详解
  • 五种css溢出隐藏的方法----亲测可用
  • 基于Java SSM框架实现企业台账管理平台系统项目【项目源码+论文说明】计算机毕业设计
  • 4.4 matlab三维曲线(plot3函数、fplot3函数)
  • FusionCharts简单教程(一)---建立第一个FusionCharts图形
  • DNS服务器 - 理论
  • OpenGL学习之各种流程及函数详解——基于LearnOpenGL(持续更新)
  • 如何查看电脑使用记录?保障个人隐私和安全
  • CSS一级导航-天蓝色(带阴影)
  • app测试必掌握的核心测试:UI、功能测试!
  • 析构函数的定义 合成析构函数
  • Android和Ios的crash reporter(崩溃报告采集与上传)
  • 跳动爱心代码-李峋同款爱心代码1(完整代码)
  • Metalink使用
  • idou老师带你认识Istio13:Istio实现基础认证策略
  • simulink中积分环节、惯性环节、比例环节
  • null 与 not null
  • 软件工程知识——软件配置管理
  • 远程桌面连接命令和一些常用的cmd命令
  • location对象
  • GCC安装入门教程(非常详细)从零基础入门到精通,看完这一篇就够了
  • 深入C#学习系列一:序列化(Serialize)、反序列化(Deserialize)