关于css中的子绝父相

刚开始学习css的时候一直认为只有父元素设置了position:relative子元素设置的position:absolute才会相对于父元素起效。否则就会向上一级搜寻设置了relative属性的元素并相对于其进行定位。

后来发现并不是

父元素设置了position:fixed属性的话子元素一样可以根据相对于父元素进行定位。之所以一直强调的是子绝父相，这是因为在标准流下，我们如果给父元素设置fixed来将其作为子元素的参考位置，那么因为设置了fixed属性的元素是脱离标准流的，所以下面的盒子会填补设置了fixed属性的设置，也即前面所说的父元素。在大多数情况下，这是我们不希望看到的，我们希望父元素仍然可以保留原来的位置，其余的盒子位置不受影响，所以我们一直强调，子绝父相。

但如果我们想要作为位置参考的元素本就是期望不占有位置的元素，那其子元素在设置了position:absolute之后，父元素没有必要再去设置position:relative；这样反而会导致父元素原先设置的position:fixed;不起效果