position小结

w3c和mdn文档都有解释,我就直接写demo吧哈哈!
1.position:relative的left和top结合使用

效果:

image.png

相对于左上角
2.position:relative的right和bottom结合使用

效果:

image.png

你会发现向左向上移动了,这是因为

position:relative的时候这些div块都是相对于自身移动的,是left,top的时候以向下向右为正坐标轴,当是right,bottom的时候,以向上向左为正坐标轴,
3..position:absolute的left和top结合使用

效果:

image.png

相对于左上角
4..position:absolute的right和bottom结合使用

效果:

image.png

相对于右下角

6

5 和6的demo都是相对于右下角,但是从5这个demo中能知道position:absolute的时候是相对于视窗可见位置的偏移,而不是整个body中,因为body宽1500px,从这可以看出来的.从6这个demo可以看出是以向上向左为正半轴的.

7

效果图:

image.png

app不设置position时,等同于static,此时的子元素不是相对于父元素定位的,而是相对于窗口;
当position不是static的时候,是相对于父元素