zoukankan html css js c++ java

♫【JS】offsetParent

This property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does 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>

查看全文

相关阅读:
全站生成静态文件的通用方法
 Web.config配置文件详解(新手必看)
iis7/7.5设置上传文件最大大小
 C# 中的常用正则表达式总结
 60款很酷的 jQuery 幻灯片演示和下载
 DataReader记录生成多列的表格
 正则表达式
 博客转移
 ASP.Net学习之常用SQL存储过程(1)
遍历Request的信息

原文地址：https://www.cnblogs.com/jzm17173/p/3532457.html