position方法使用条件

position方法使用条件

poisition是只能在,父元素设置定位,比如position:relative,之后才能获取相对父元素的偏移吗

我没有设置父元素的position属性时,获取子元素的position()方法,就是相对文档的偏移

  #box{width:400px;height:400px;background:green;text-align:center;/* position: relative; */}
  .child{width:300px;height:300px;background: yellow;/*position: relative;*/}
 <ul id="list" class="list">
        <li>1</li>
        <li class="it2">2</li>
        <li>3</li>
        <li class="it4">4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div id="box">
        <div class="child"></div>
    </div>
    <script src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
         console.log($('#box').offset());
           console.log($('.child').position());
         });
        
</script>

http://img1.sycdn.imooc.com//climg/5c3c29e000011fa404380479.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
山河远阔ZZ 2019-01-14 16:19:15

同学你好,首先先跟你道个歉,第一遍看你的代码的时候,没有完全理解你的疑惑,以为你是没有明白元素设置了position:relative是根据谁定位,所以做出了回答,现在根据你的回复,又结合问题重新分析了一下,明白了你的真实需求,下面我再做一下补充:

1、offset():用于返回或设置匹配元素相对于文档的偏移(位置),所以#box不设置定位,它获取出来的位置就是它起始的位置(就是在文档中的位置)

2、position() :用于返回匹配元素相对于父元素的位置(偏移),因为child的父元素设置了相对定位,所以child根据它的父元素进行定位。

同学放心,你有问题老师一定会帮你解决,以后老师会更加细心认真的为大家服务,也建议大家在提问的时候,能够尽量的表达清楚自己的问题,感谢同学的建议和支持,我们一起努力。

如果帮助到了你,欢迎采纳!如果还有疑问,可以再提出来。

祝学习愉快!

山河远阔ZZ 2019-01-14 15:42:55

同学你好,

1、在代码中,没有给黄色的块跟绿的块设置定位并改变他们的位置,所以获取的它的起始位置。

2、如果两个块都设置了position:relative,之后,#box网上找没有找到参照物(就是没有找到设置了定位的),所以他还是根据自己进行的定位。

3、而#box里面的子元素child设置了定位之后,它找到父容器设置了定位,所以他根据父容器进行定位,所以获取的是left:0,top:0。

希望解决了你的问题,祝学习愉快,望采纳!

  • 提问者 蛋蛋90斤 #1
    你提出的的第2点,我写的#box是用的offset方法,本来就是相对文档定位的,他不会去找有没有设置定位的父元素,说明你根本就没有仔细看我写的问题 我已经解决了我问的问题,只需要一句话: position():返回匹配元素相对于它最近的具有相对位置的父元素的位置偏移
    2019-01-14 15:57:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师