绝对定位常见误区:position:absolute相对于谁定位、及当溢出时怎么隐藏


1、绝对定位元素溢出父元素,怎么隐藏问题?

  通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏!

  但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有position:absolute属性的子元素进行溢出隐藏!

  绝对定位元素相对的元素是它最近的一个祖先,该祖先满足:position的值必须是:relative、absolute、fixed,若没有这样的祖先则相对于body进行定位。偏移值由其top、bottom、left、right值确定。

  而绝对定位的元素若超出其父元素的边界,要想将溢出的部分隐藏,则,想隐藏在哪个祖先里,该祖先必须同时设置position:relative/absolute/fixed和overflow:hidden的值。

2、绝对定位常见误区:

  通常我们常听说:CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位,如果要想相对当前元素的父元素来定位,父元素一定要设置position:relative。

  注意,前面一句是没有问题的,在没有父元素设置定位的话,默认就是以body来定位的,但是后面一句,要想相对父元素定位,父元素必须设置相对定位(relative),根据我的开发经验和查阅相关资料确认后发现,这是不对的。

  正确的理解姿势是:

  相对定位:相对于块级元素(或行内块)自身位置进行定位;

  绝对定位:绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body);

  注意:css描述的绝对定位概念,没有说明是离他最近的一个已相对定位的盒子进行定位的,所以离他最近的盒子的定位可以是相对定位(relative)和绝对定位(absolute)的,但是在开发中,一般是父盒子设置相对定位的,但是不代表只能是相对定位。

  举个例子:

<div class="father">
   <div class="son"></div>
</div> .father{ width: 300px; height: 300px; background-color: orange; position: absolute; top:50%; left:50%; margin-top: -150px; margin-left: -150px; } .son{ width: 100px; height: 100px; background-color: pink; position: absolute; left:0; top:0; }

  .father元素绝对定位是相对body的,这个没问题,主要看.son元素,他自身设置绝对定位,父元素.father也有绝对定位,你觉得这个子元素会相对body定位还是父元素来定位呢?

  结果为:子元素是相对于有绝对定位的父元素来定位的,而不是body;


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM