18、位置

作者: 一直流浪 | 来源:发表于2022-09-01 12:28 被阅读0次

18、位置
感知位置（18）
format（）
ckplayer去除页面信息
足太阳膀胱经——下肢
雨水
《妈妈的位置》2018-05-18
2019-10-18《位置~关系~交易》
足太阳膀胱经——腰背部
《缠论形动学》第6节：突破类买点（涨停板高发区）与回踩类买点（缠

方法：

offset()
- 获取一个对象，对象里面包含top和left；offset()获取元素距离document的位置
position()
- 获取一个对象，对象里面包含top和left；position()获取元素距离定位父级(offsetParent)的位置

代码案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .father{
                width: 400px;
                height: 400px;
                border: 10px solid red;
                position: relative;
                top: 10px;
                left: 10px;
            }
            .son{
                width: 100px;
                height: 100px;
                border: 10px solid green;
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <input type="button" id="btn1" value="offset()" />
        <input type="button" id="btn2" value="position()" />
        
        <div class="father" id="father">
            <div class="son"  id="son">
                
            </div>
        </div>
    </body>
</html>

<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        //1. offset()
        //获取一个对象，对象里面包含top和left
        //offset()获取元素距离document的位置
        $('#btn1').click(function(){
            console.log($('#son').offset());  //top:143 ,left:120
        });
        
        //2.position()
        //获取一个对象，对象里面包含top和left
        //position()获取元素距离定位父级(offsetParent)的位置
        $('#btn2').click(function(){
            console.log($('#son').position());  //top:100,left:100
        });
    })
</script>