zoukankan      html  css  js  c++  java
  • 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。
    
  • 相关阅读:
    1.1 java变量及数据类型
    3. 软件测试的类型
    2.3 软件测试模型之 敏捷测试
    2.2 软件测试的手段
    2.1 软件测试的阶段
    1.1 软件测试基础概念
    浅谈内联元素inline
    微信内置浏览器清除缓存的方法
    我的package.json清单
    我的gulp.js清单
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2746751.html
Copyright © 2011-2022 走看看