zoukankan      html  css  js  c++  java
  • [转] 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元素

    总结

    1. position为fixed元素是没有offsetParent,但firefox统一返回body。
    2. position为absolute, relative的元素的offsetParent总是为其最近的已定位的元素,
      没有找最近的td,th元素,再没有找body。
    3. position为static的元素的offsetParent则是先找最近的td,th元素,再没有找body。
    4. body为最顶层的offsetParent。

    个人观点

    用的比较多的是在没有table的情况下。所以很好记得。

  • 相关阅读:
    leetcode 13. Roman to Integer
    python 判断是否为有效域名
    leetcode 169. Majority Element
    leetcode 733. Flood Fill
    最大信息系数——检测变量之间非线性相关性
    leetcode 453. Minimum Moves to Equal Array Elements
    leetcode 492. Construct the Rectangle
    leetcode 598. Range Addition II
    leetcode 349. Intersection of Two Arrays
    leetcode 171. Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/chris-oil/p/6662254.html
Copyright © 2011-2022 走看看