css当中的子绝父相重要性

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

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

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

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

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

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

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

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

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

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

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

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

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