offsetParent算法分析

zoukankan html css js c++ java

offsetParent算法分析
<!DOCTYPE HTML> <html id="html"> <head> <title>offsetParent by 司徒正美</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="mass.js"> </script> <style type="text/css"> body,html{ height:100%; background:orange; } #relative { position: relative; } div{ 100px; height:100px; background: red; margin:10px; } #aaa,#eee,#iii,#mmm,#qqq{ position: relative; } #bbb,#fff,#jjj,#nnn,#rrr{ position: absolute; } #ccc,#ggg,#kkk,#ooo,#sss{ position: fixed; background: blue; } #td2 { position: relative; } td{ background: green; } form{ margin-left:160px; } </style> <script> window.onload = function(){ var add = "<ul>" var i = 0 var hash = { 1: "自身position: relative的DIV元素", 2: "自身position: absolute的DIV元素", 3: "自身position: fixed的DIV元素", 0: "自身position: static的DIV元素" } "abcdefghijklmnopqrst".replace(/\w/g, function(id){ i++; add += "<li>" if( i < 5){ add += "没有已定位的父节点，且" } if(i >= 5 && i < 9){ add += "拥有一个已定位的父节点，且" }else if( i >= 9 && i < 13){ add += "在table之内，td与table都没有定位，且" }else if( i >= 13 && i < 17){ add += "在table之内，td相对定位，且" }else if( i >= 17){ add += "在table之内，table相对定位，且" } add += hash[ i % 4]; id = id + id + id; var el = document.getElementById(id).offsetParent var ret = (el && el.id)+""; switch(ret){ case "html": add += "的offsetParent为HTML" break case "body": add += "的offsetParent为BODY" break case "relative": add += "的offsetParent为其最近被定位的祖先" break case "td": case "td2": case "td3": add += "的offsetParent为其最近的<strong>TD、TH</strong>元素" break case "table": add += "的offsetParent为其最近的<strong>TABLE</strong>元素" break default: add += "的offsetParent为null" break } add += "</li>" }) add += "</ul>" console.log(add) var el = document.createElement("form"); document.body.appendChild( el ); el.innerHTML = add; } </script> </head> <body id="body"> <blockquote> <div id="aaa"> </div> <div id="bbb"> </div> <div id="ccc"> </div> <div id="ddd"> </div> </blockquote> <blockquote id="relative"> <div id="eee"> </div> <div id="fff"> </div> <div id="ggg"> </div> <div id="hhh"> </div> </blockquote> <table border="1" id="table"> <tr> <td id="td"><div id="iii"></div><div id="jjj"></div><div id="kkk"></div><div id="lll"></div></td> </tr> <tr> <td id="td2" ><div id="mmm"></div><div id="nnn"></div><div id="ooo"></div><div id="ppp"></div></td> </tr> </table> <table style="float:left;border:1px solid black; position: relative;" id="table"> <tr> <td id="td3"><div id="qqq"></div><div id="rrr"></div><div id="sss"></div><div id="ttt"></div></td> </tr> </table> </body> </html>

根据其自身定位情况与父节点的标签类型与定位情况，分为以下二十种情况（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。
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
查看全文

相关阅读:
重视需求
 某2个人的qq对话
 公司安全提示
 需求实施心得
 项目远景
 发布系统应注意的几小点问题
 把握项目开发的节奏
 Css介绍
 调研工作的思路
 网，无处不在

原文地址：https://www.cnblogs.com/rubylouvre/p/2746751.html