position:absolute相对于谁定位及溢出隐藏问题

1、绝对定位元素溢出父元素如何隐藏

通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏!
而绝对定位的元素若超出其父元素的边界,要想将溢出的部分隐藏,则,想隐藏在哪个祖先里,该祖先必须同时设置position:relative/absolute/fixed和overflow:hidden的值。

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

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

前面一句是没有问题的,在没有父元素设置定位的话,默认就是以<html>元素来定位的,但要想相对父元素定位,父元素除了设置相对定位(relative),设置absolute也是可以的。

正确的理解姿势是:

1.相对定位:相对于块级元素(或行内块)自身位置进行定位;
2.绝对定位:绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body);

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

举个例子:

//CSS部分
<style>
.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;
}
</style>

//html部分
<div class="father">
   <div class="son"></div>
</div>

.father元素绝对定位是相对body的,这个没问题,主要看.son元素,他自身设置绝对定位,父元素.father也有绝对定位,但这个子元素是相对于有绝对定位的父元素来定位的,而不是body。

--参考自https://www.cnblogs.com/goloving/p/9275776.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,697评论 1 92
  • position属性比起其他的基础属性来讲要复杂一些,我在这试着把里面的门道全部总结出来。 目前position有...
    microkof阅读 9,122评论 3 5
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,403评论 1 45
  • 原文地址:详解绝对定位和相对定位 上一篇博文中对元素的居中方式进行了总结,其中很多方法中都用到了相对定位和绝对定位...
    薛普定朗谔克阅读 9,424评论 0 19
  • By Leaf 定位是css布局的核心,在项目中很多地方都需要用到定位,这里做一个小结,便于记忆查询。 定位pos...
    HYC_阅读 3,725评论 1 2

友情链接更多精彩内容