This property will return
nullon Webkit if the element is hidden (thestyle.displayof this element or any ancestor is"none") or if thestyle.positionof the element itself is set to"fixed".This property will return
nullon Internet Explorer (9) if thestyle.positionof the element itself is set to"fixed". (Havingdisplay:nonedoes not affect this browser.)
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> *{margin:0;padding:0} div{width:50%;padding:20px;border:5px solid green} #box1{position:relative} #box4{position:absolute;display:none;border-color:red} </style> <div id="box1"> <div id="box2"> <div id="box3"> <div id="box4"></div> </div> </div> </div> <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script> <script> var $box3 = $('#box3') var $box4 = $('#box4') $box4.css({visibility:'hidden',display:'block'}) var $box = $box4.offsetParent() // or var $box = $(document.getElementById('box4').offsetParent) $box4.css({visibility:'',display:'none'}) var offset1 = $box3.offset() var offset2 = $box.offset() $box4.css({ top: offset1.top + $box4.outerHeight() - parseInt($box.css('border-top-width'), 10) - offset2.top, left: offset1.left - parseInt($box.css('border-left-width'), 10) - offset2.left, display: 'block' }) </script> </body> </html>