平时我们运用position:relative一般都是在使用absolute的时候限制他的相对定位。那如果直接使用relative呢?是相对于什么来进行定位的?
一开始的位置:由于设置了padding-left,可以更好地区分一些情况:
用relative,left:50%后的位置:
可以看出,它的移动是相对于元素本身的位置移动。那是移动了多少的位置?
我设置的是left:50%,显然并不是自身的50%,而是父元素的长度的50%。而在盒子模型中,width是不包括padding和border的,我设置了左边的padding-left,因此移动了这些距离。
然后我有试了下top:50%,这时候是这样的:
也就是说没有移动。
然后我给父级元素设置了一个高度,和这个绿色方块的高度一致。结果如下:
移动了。
难道撑开的父级元素原本没有高度?为什么一开始不移动?
但我用js获取父元素的高度就是被撑开的高度。
因此这是一个诡异的点,用relative来定位,用百分比设置top,如果父元素不定义高度,将不移动。
当然如果是直接给一个值那就能移动了。