现在的位置: 首页 > web前端 > 正文

深入理解定位父级offsetParent

2020年07月17日 web前端 ⁄ 共 928字 ⁄ 字号 评论关闭

  offsetParent()方法返回最近的祖先定位元素。定位元素指的是元素的CSSposition属性被设置为relative、absolute或fixed的元素。可以通过jQuery设置position,或者通过CSS的position属性。


  offsetParent()实例


  设置最近的祖先定位元素的背景颜色:


  $("button").click(function(){


  $("p").offsetParent().css("background-color","red");


  });


  语法


  $(selector).offsetParent()


  深入理解定位父级offsetParent及偏移大小


  偏移量(offsetdimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然,还有一个偏移参照——定位父级offsetParent。本文将详细介绍该部分内容


  定位父级


  在理解偏移大小之前,首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关


  定位父级offsetParent的定义是:与当前元素最近的经过定位(position不等于static)的父级元素,主要分为下列几种情况


  元素自身有fixed定位,offsetParent的结果为null


  当元素自身有fixed固定定位时,我们知道固定定位的元素相对于视口进行定位,此时没有定位父级,offsetParent的结果为null


  [注意]firefox浏览器有兼容性问题


  <divid="test"style="position:fixed"></div>


  <script>


  //firefox并没有考虑固定定位的问题,返回<body>,其他浏览器都返回null


  console.log(test.offsetParent);


  </script>


  总之,offsetparent给大家简单的介绍了一些,希望大家多看看。


  

抱歉!评论已关闭.