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

有几点请大家了解（可以不看）：

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

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

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

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

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

正题：为什么不用“子绝父绝”？

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

横幅和关闭图标的关系

然后：这时图标的绝对定位的一定是相对它最近已定位的祖先元素（我们这里把也就是横幅）定位的；

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

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

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

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