关于css中的子绝父相

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

后来发现并不是

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

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

原文地址:https://www.cnblogs.com/echol/p/14291076.html