CSS绝对定位和相对定位和子绝父相

有几点请大家了解(可以不看):

1、relative相对定位会在标准流当中占位置

2、absolute绝对定位不会在标准流当中占位置

3、绝对定位一定要有参照物才能相对参照物进行定位;

4、绝对定位是 相对于距离它最近已经定位的祖先元素 进行定位

5、不一定非要“子绝父相”,子绝父绝也是可以的

正题:为什么不用“子绝父绝”?

首先:比如广告横幅右上角“关闭按钮”(我们的本意是要让图标“浮”在广告横幅上面,不占据标准流当中 的位置)所以按钮图标只能用绝对定位。

横幅和关闭图标的关系

然后:这时图标的绝对定位的一定是相对它最近已定位的祖先元素(我们这里把也就是横幅)定位的;

所以最后:子绝已经是确定了的,这时最近的祖先元素(父)有两种情况:

1、如果使用了“子绝父相”:也就是①横幅(最近的祖先元素)是相对定位,这时横幅是在整个标准流当中占据位置的,下面的内容不会被顶上来。②关闭图标是绝对定位,正好是相对父元素横幅进行的定位。

2、如果使用了“子绝父绝”:虽然“关闭图标”是放在了横幅的正确位置上,但是这个时候横幅也是绝对定位,也会“浮”起来,这时候下面标准流的内容就会顶上来,被横幅遮盖住。

总之:把脱离文档流的元素放在不脱离文档流(需要占位置)的元素上就要用“子绝父相”

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,785评论 0 15
  • CSS布局在整个前端开发中占据了大约50-70%的工作量,在遵循web规范的前提下,编写合乎规范的前端代码,实现结...
    FaithXiong阅读 795评论 0 0
  • 原文地址:详解绝对定位和相对定位 上一篇博文中对元素的居中方式进行了总结,其中很多方法中都用到了相对定位和绝对定位...
    薛普定朗谔克阅读 3,943评论 0 19
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,508评论 0 5