CSS绝对定位和相对定位和子绝父相
有几点请大家了解（可以不看）：
1、relative相对定位会在标准流当中占位置；
2、absolute绝对定位不会在标准流当中占位置；
3、绝对定位一定要有参照物才能相对参照物进行定位；
4、绝对定位是 相对于距离它最近的已经定位的祖先元素 进行定位
5、不一定非要“子绝父相”，子绝父绝也是可以的
正题：为什么不用“子绝父绝”？
首先：比如广告横幅右上角“关闭按钮”（我们的本意是要让图标“浮”在广告横幅上面，不占据标准流当中 的位置）所以按钮图标只能用绝对定位。
横幅和关闭图标的关系
然后：这时图标的绝对定位的一定是相对它最近已定位的祖先元素（我们这里把也就是横幅）定位的；
所以最后：子绝已经是确定了的，这时最近的祖先元素（父）有两种情况：
1、如果使用了“子绝父相”：也就是①横幅（最近的祖先元素）是相对定位，这时横幅是在整个标准流当中占据位置的，下面的内容不会被顶上来。②关闭图标是绝对定位，正好是相对父元素横幅进行的定位。
2、如果使用了“子绝父绝”：虽然“关闭图标”是放在了横幅的正确位置上，但是这个时候横幅也是绝对定位，也会“浮”起来，这时候下面标准流的内容就会顶上来，被横幅遮盖住。
总之：把脱离文档流的元素放在不脱离文档流（需要占位置）的元素上就要用“子绝父相”
网友评论