RunCode
Based on its own positioning and the label type and positioning of the parent node, there are 20 cases (IE8, chrome23, opera12 results ):
We can summarize the following rules:
A) if the position is fixed, there is no offsetparent, but Firefox returns the same body. B) The position is absolute. The offsetparent of relative elements is always the most recent located element. The latest TD and th elements are not found, and no body is found. C) The offsetparent of an element whose position is static is to first find the nearest TD or th element, and then not find the body. D) The body is the top-level offsetparent.
Posted onSitu zhengmei reading (...) Comment (...) EDIT favorites
<Br/> <! Doctype HTML> <br/> <HTML id = "html"> <br/> <pead> <br/> <title> offsetparent by situ zhengmei </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <SCRIPT src =" mass. JS "> </P> <p> </SCRIPT> <br/> <style type =" text/CSS "> <br/> body, HTML {<br/> Height: 100%; <br/> Background: orange; <br/>}< br/> # Relative {<br/> position: relative; <br/>}< br/> Div {<br/> width: 100px; <br/> Height: 100px; <br/> Background: red; <br/> margin: 10px; <br/>}< br/> # AAA, # Eee, # iii, # Mmm, # qqq {<br/> position: relative; <br/>}< br/> # BBB, # fff, # jjj, # Nnn, # RRR {<br/> position: absolute; <br/>}< br/> # CCC, # ggg, # KKK, # Ooo, # SSS {<br/> position: fixed; <br/> Background: blue; <br/>}< br/> # td2 {<br/> position: relative; <br/>}< br/> TD {<br/> Background: green; <br/>}< br/> FORM {<br/> margin-left: 160px; <br/>}< br/> </style> <br/> <SCRIPT> </P> <p> window. onload = function () {<br/> var add = "<ul>" <br/> var I = 0 <br/> var hash = {<br/> 1: "Self position: div element of relative", <br/> 2: "self position: div element of absolute", <br/> 3: "self position: the DIV element of fixed ", <br/> 0:" position: static Div element "<br/>}< br/>" abcdefghijklmnopqrst ". replace (/\ W/g, function (ID) {<br/> I ++; <br/> Add + = "<li>" <br/> if (I <5) {<br/> Add + = "no parent node has been located, and "<br/>}if (I >= 5 & I <9) {<br/> Add + =" has a parent node that has been located, and "<br/>} else if (I> = 9 & I <13) {<br/> Add + =" in table, neither TD nor table is located, and "<br/>} else if (I> = 13 & I <17) {<br/> Add + =" in table, TD is relatively located, and "<br/>} else if (I> = 17) {<br/> Add + =" in the table, the table is relatively located, and "<br/>}< br/> Add + = hash [I % 4]; <br/> id = ID + ID; <br/> var El = document. getelementbyid (ID ). offsetparent <br/> var ret = (El & el. ID) + ""; <br/> switch (RET) {<br/> case "html ": <br/> Add + = "offsetparent is HTML" <br/> Break <br/> case "body ": <br/> Add + = "offsetparent is body" <br/> Break <br/> case "relative ": <br/> Add + = "The offsetparent of add + =" is the ancestor of the nearest located "<br/> Break <br/> case" TD ": <br/> case "td2": <br/> case "td3 ": <br/> Add + = "offsetparent is its latest <strong> TD, th </strong> element" <br/> Break <br/> case "table ": <br/> Add + = "offsetparent is its latest <strong> table </strong> element" <br/> Break <br/> default: <br/> Add + = "offsetparent is null" <br/> Break <br/>}< br/> Add + = "</LI>" <br/> }) <br/> Add + = "</ul>" <br/> console. log (ADD) <br/> var El = document. createelement ("form"); <br/> document. body. appendchild (EL); <br/> el. innerhtml = add; </P> <p >}</P> <p> </SCRIPT> <br/> </pead> <br/> <body id = "body"> <br/> <BLOCKQUOTE> <br/> <Div id = "AAA"> </P> <p> </div> <br/> <Div id = "BBB"> </P> <p> </div> <br/> <Div id = "CCC"> </P> <p> </div> <br/> <div id = "DDD"> </P> <p> </div> <br/> </BLOCKQUOTE> <br/> <BLOCKQUOTE id = "relative"> <br /> <Div id = "eee"> </P> <p> </div> <br/> <Div id = "fff"> </P> <p> </div> <br/> <Div id = "ggg"> </P> <p> </div> <br/> <Div id = "hhh"> </P> <p> </div> <br/> </BLOCKQUOTE> <br/> <Table border = "1" id = "table"> <br/> <tr> <br/> <TD id = "TD"> <Div id = "III"> </div> <Div id = "jjj"> </div> <Div id = "KKK"> </div> <Div id = "lll"> </div> </TD> <br/> </tr> <br/> <tr> <br/> <TD id = "td2"> <Div id = "mmm"> </div> <Div id = "nnn"> </div> <Div ID = "ooo"> </div> <Div id = "PPP"> </div> </TD> <br/> </tr> <br/> </table> <br/> <Table Style = "float: left; Border: 1px solid black; position: relative; "id =" table "> <br/> <tr> <br/> <TD id =" td3 "> <Div id =" qqq "> </div> <Div id = "rrr"> </div> <Div id = "Sss"> </div> <Div id = "TTT"> </div> </TD> <br /> </tr> <br/> </table> </P> <p> </body> <br/> </ptml> </P> <p>
Run code
Based on its own positioning and the label type and positioning of the parent node, there are 20 cases (IE8, chrome23, opera12 results ):
We can summarize the following rules:
A) if the position is fixed, there is no offsetparent, but Firefox returns the same body. B) The position is absolute. The offsetparent of relative elements is always the most recent located element. The latest TD and th elements are not found, and no body is found. C) The offsetparent of an element whose position is static is to first find the nearest TD or th element, and then not find the body. D) The body is the top-level offsetparent.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
