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。
    
  • 相关阅读:
    app 后端技术
    别为大公司拼命
    ifconfig 工具
    route工具
    ping 和 traceroute 命令
    IP路由选择
    TCP的那些事儿(下)
    TCP的那些事儿(上)
    Openresty 与 Tengine
    Excel.Application SaveAs 把excel转换为html
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2746751.html
Copyright © 2011-2022 走看看